How can i enforce the scaffolding automatically ge

Question

I am developing an asp.net mvc 3 with razor view , i also automatically generate the associated action methods and view using the scaffolding template. But the problem i am facing is that on the view the lable and editorfor input field will be displayed in two separate lines (each on a separate Div)as follow:-

<div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

So is there a way to do a change to force the label and the input input box to be displayed beside each other ,, without the need to manually modify the code at each view ? BR

Answer 1

In the default Site.css file that's created by Visual Studio (so \Your Project\Content\Site.css), under the /* forms */ section, you'll see the following:

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

Just change display: block; to display: inline;, and now all of your input fields will appear on the same line as the label.

Answer 2

You can edit the t4 templates that output the markup directly. The scaffolding files can be found on your machine here:

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 3\CodeTemplates\AddView\CSHTML

You will see a list of .tt files, and these are the files that are used to generate the automatically-outputted html. If you don't the like default way that the elements are layed out, change them! Just remember, changing these will result in a permanent change to the scaffold.

Answer 3

Not sure if this is what you are looking for but here is my view:

    <div class="editor-label">
    @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.Title)
    @Html.ValidationMessageFor(model => model.Title)
    </div>

    <div class="editor-label">
    @Html.LabelFor(model => model.DateCreated)
    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.DateCreated)
    @Html.ValidationMessageFor(model => model.DateCreated)
    </div>

And I modified this CSS to add float: left; to each of the classes

.display-label, 
.editor-label {
margin: 1em 0 0 0;
float: left;
}

.display-field, 
.editor-field {
margin: 0.5em 0 0 0;
float: left;
}