Cleaning up an asp.net mvc2 autogenerated html form -css?

Question

I have some ASP.NET (MVC2) auto generated html which is creating forms looking like this:

This is because say each of the drop downs is a list of strings, some string in that drop down is long/short.

What I want to do is make them all the same size, or at least clean this form up in some way.

I'm guessing I can inspect the rendered html, and use css on that to do the job maybe.

Any suggestions / css code ?

Cheers

EDIT:

So it seems to use a editor template you need to add metadata to the classes.

How do you do this if you have used Entity Data Model (and it is all generated for me) and I have a DataModel.edmx and DataModel.Designer.cs - where does the metadata tags go ?

You probably shouldn't pass Model classes to your Editor Template. Instead, you should create ViewModel classes, setup all the DataAnnotations that you'd like, then use AutoMapper to map those ViweModels to your Model classes. — Evan Nagle
– Evan Nagle, Commented Nov 10, 2010 at 1:03
I agree with @ewwwyn. Try to get into the habit of having a ViewModel for every View, and add the model classes to the ViewModel. — RPM1984
– RPM1984, Commented Nov 10, 2010 at 2:24
I see... Makes sense and happy to use view model for each view, but thought I needed to define the dataannotations etc in the actual class not the viewmodel class... Are there any tutorials of how to "use AutoMapper to map those ViewModels to your Model classes." ? — baron
– baron, Commented Nov 10, 2010 at 3:52

Evan Nagle · Accepted Answer · 2010-11-10 00:37:03Z

Yes. It's probably best to add classes to your input fields:

<%: Html.TextBoxFor(m => m.FirstName, new { @class = "form-input-w100" }) %>

Then, in a css file, you'd specify a width:

input.form-input-w100 { width: 100px; }

If you want to maintain granular control over the styling of your forms, I'd suggest that you stray away from the default Editor Templates. They're not super css-friendly. Alternately, you can create your own style-friendly Editor Templates (as described here: http://www.weirdlover.com/2010/07/15/the-big-boy-mvc-series-part-24-dear-editortemplates-are-we-done-posting-yet/).

And, to top it all off, you CAN force a width on all the objects in a form, even if the form is not marked up well, but I do NOT recommend this kind of approach. I'll give it to you anyways:

#pageArea form input[type=textbox] { width: 100px; }
#pageArea form select { width: 140px; }

Etc.

Hope that helps!

P.S. If you need more info about styling--check out http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

JonVD · Accepted Answer · 2010-11-10 00:33:08Z

2

An easier method to make them all uniform is to use a selector that grabs all your combo boxes, such as this:

input[type=select] { width: 300px; }

Here is a good post on css selectors.

answered Nov 10, 2010 at 0:33

JonVD

4,27826 silver badges24 bronze badges

Comments

Glorfindel · Accepted Answer · 2022-01-11 09:06:12Z

1

Sounds you want to create a custom editor template.

That way, you can say:

<%: Html.EditorFor(x => Model.Customer) %>

Which would then render out the view bound to the customer object.

There is a SO discussion on EditorFor/DisplayFor/PartialView's here.

Another (somewhat painful) solution is to edit the view template.

There is a blog post on that here

edited Jan 11, 2022 at 9:06

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered Nov 10, 2010 at 0:28

RPM1984

73.3k62 gold badges242 silver badges364 bronze badges

Collectives™ on Stack Overflow

Cleaning up an asp.net mvc2 autogenerated html form -css?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related