MikeC MikeC -4 years ago 90
CSS Question

Having 3+ Input Fields on a Single Line in Templated Bootstrap Razor View

I am using scaffolding for ASP.NET MVC model first development. The views created look good, but they are laid out with one field per line. I am trying to get multiple fields to display on a single line in some places, but cannot find the best way to do this, while still having the input fields appear nicely formatted.
The razor code generated is like this:



<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.MiddleName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>



If I strip out all the Bootstrap CSS classes, I can do it, but then I lose the nice formatting of the input fields.

Answer Source

First, each form-group automatically gets its own line. It employs a clearfix to ensure that nothing else wraps around it. Second, even if it didn't, each of your label/field combos are consuming 12 columns. Since there's only 12 columns to work with in the Bootstrap grid, each would wrap to a new line anyways.

There's two options here. If you want multiple fields on the same line, under the same label, you can simply put them all within your col-md-10 div within the form-group:

<div class="form-group">
    <label class="control-label col-md-2" for="@Html.IdFor(m => m.FirstName)">Name</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-4">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-4">
                @Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-4">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

Alternatively, you can simply put each form-group into a column within an overall row:

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.MiddleName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div> 
    </div>
</div>

With this option, though, you should probably avoid the form-horizontal layout and simply stack your label on top of your fields. Otherwise, the labels are going to consume too much of the horizontal space.

All of this is just basic Bootstrap grid markup, though. There's nothing special about the fact that you're dealing with form elements.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download