Question

Using MVC 3 @html.EditorForModel, the auto-generated template spits out

<div class="editor-label">....
<div class="editor-field">....
<div class="editor-label">....
<div class="editor-field">....

Both classes are floated left so that the elements fit the horizontal space.

When the list of fields is about 10, the lines sometimes break between label and input; this looks bad.
What is the best way to keep them on the same line? If I were coding manually, I could wrap them inside another div, such as

<div class="editor-wrap">....
    <div class="editor-label">....
    <div class="editor-field">....

and float “editor-wrap”. However, in keeping with not wanting to hand-code each page, is there some way to enhance/change the behaviour of EditorForModel? Or can something be done at the .cshtml (view) level with a custom class?

Answer 1

You can completely customize the templates MVC uses. In your Views/Shared/EditorTemplates directory, for example, you can create a template named Foo.cshtml (or whatever view engine you are using). When you call EditorForModel you can pass the name of the template (it is a parameter on one of the overloads). I recommend this series of articles to really understand the whole process:

http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html