Geek Answers Handbook

Label and text field on one line + text field on the whole width

By default, in ASP.NET MVC, when the system generates views (scaffolding), we have a label on one line and a text box on the next line. I would like to have a label and a text box on the same line and have a text box all over the width (100%). I try to achieve this without success.

I found several similar posts, but did not allow me to have a text box over the entire width!

Here is what I want:

enter image description here

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?

+4
source share
3 answers

This is a purely HTML / CSS question that has nothing to do with ASP.NET MVC. I would recommend the following article for creating good HTML forms using CSS.

So, in your case, you can float: left label and determine its fixed width. As shown in this live demo , I wrote for you:

 .editor-label { float: left; width: 200px; } .editor-field { margin-left: 200px; } .editor-field input { width: 100%; }
+9
source 
 This is the correct answer:both label and textboxes are in the same line .editor-label{ float: left; width: 100%; margin-bottom:-20px; } .editor-field { margin-left: 120px; margin-bottom:-5px; } .display-label { float: left; padding: 0; width: 160px; }
0
source

Another way: you can customize the class, change to use a table

-2
source

More articles:


All Articles