CODEWITHSUNDEEP
c#asp.netasp.net-mvc
RichardTheKiwi
RichardTheKiwi

Reputation: 107686

Keep editor label and input on the same line

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?

Upvotes: 1

Views: 2261

Answers (1)

InfinitiesLoop
InfinitiesLoop

Reputation: 14599

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

Upvotes: 1

Related Questions