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 ?

Answer 1

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/