Question

By default in ASP.NET MVC, when the system generate views (scaffolding) we have the label on one line and the textbox on the next line. I would like to have the label and the textbox on the same line and having the textbox on the whole width (100%). I try to achieve this without success.

I found some similar posts but not allowing me to have the textbox on the whole width!

Here is what I want:

So, by default I have:

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

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

Any idea?

Answer 1

That’s a purely HTML/CSS question that has nothing to do with ASP.NET MVC. I would recommend you the following article for creating nice HTML forms with CSS.

So in your case you could float: left the label and define it a fixed width. Just as illustrated in this live demo I wrote for you:

.editor-label {
    float: left;
    width: 200px;
}

.editor-field {
    margin-left: 200px;
}

.editor-field input {
    width: 100%;    
}