Geek asks and answers

MVC - bootstrap control in the next line with the form group

I want to use bootstrap formgroup. It works if I have one label and control, but if there are more than two controls (label, control and validation field), then the validation field will be on the next line.

I tried using form-inline but no luck. Can someone tell me how to save all the elements of a form group in one line?

        <div class="form-group">
            @Html.Label("Emp ID", new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10">
                @Html.TextBoxFor(model => model.EmpID, new { disabled = "disabled", @class = "form-control" })
            </div>
        </div>

        @* Tried with form-group *@
        <div class="form-group">
            @Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" })
            <div>
                @Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" })
              @* This validation goes in next line, how can we keep it in the same line *@
                @Html.ValidationMessageFor(model => model.EmployementTypeID)
            </div>
        </div>

        @* Tried with form-inline *@
        <div class="form-inline">
            @Html.LabelFor(model => model.Address, Constants.Address, new { @class = "col-sm-2 control-label" })
            <div>
                @Html.TextAreaFor(model => model.Address, new { @class = "form-control col-sm-10" })
           @* This validation goes in next line, how can we keep it in the same line *@
                @Html.ValidationMessageFor(model => model.Address)
            </div>
        </div>
+3
source share
2 answers

Put all the divs in another div tag and set the class as "form-horizontal". Here is a sample code

<div class="form-horizontal" style="height: 250px">
    <div class="form-group">
        <div class="col-lg-3">
            @Html.Label("My Label 1", new { @class = "control-label" })
        </div>
        <div class="col-lg-6">
            @Html.TextBox("My Label 1", "My Label Message1", 
                new { @class = "form-control" })
        </div>
        <div class="col-lg-3">
            @Html.Label("Error Message", new { @class = "form-label" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-lg-3">
            @Html.Label("My Label 2", new { @class = "control-label" })
        </div>
        <div class="col-lg-6">
            @Html.TextBox("My Label 2", "My Label Message2", 
                new { disabled = "disabled", @class = "form-control" })
        </div>
    </div>
</div>

http://getbootstrap.com/css/#forms " " .

, .

Annu

+2

class="col-sm-10" div.

:

<div class="form-group">
    @Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" })                  
        @Html.ValidationMessageFor(model => model.EmployementTypeID)
    </div>
</div>
+1

More articles:


All Articles