Lord Vermillion Lord Vermillion - 3 months ago 19
C# Question

bootstrap form-group control-label missplaced

I have a form-group where the label is missplaced, the label is too far down compared to the dropdownlist, see image.

Missplaced label

This is my code:

<div class="form-group">
<div class="col-lg-2"></div>
@Html.LabelFor(model => model.deviceModel, "OS:", htmlAttributes:
new { @class = "col-lg-2 control-label" })
<div class="col-lg-4">
@Html.DropDownListFor(model => model.deviceModel, new SelectListItem[]{
new SelectListItem{Value = "1", Text="iOS"},
new SelectListItem{Value = "2", Text="Android"}},
new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="col-lg-2"></div>
</div>


What have i done wrong, why is it missplaced?

Answer

I am not into C# and Razor but based on my comment and looking at the code the newin front of the htmlAttributes for the Dropdownlist looks not right. It seems like the class is not applied to the Dropdownlist, which then could cause the shifting, probably caused by different margin parameters.

<div class="form-group">
  <div class="col-lg-2"></div>
  @Html.LabelFor(model => model.deviceModel, "OS:", 
    htmlAttributes: new { @class = "col-lg-2 control-label" })
  <div class="col-lg-4">
  @Html.DropDownListFor(model => model.deviceModel, new SelectListItem[]{ 
    new SelectListItem{Value = "1", Text="iOS"},
    new SelectListItem{Value = "2", Text="Android"}}, 
    htmlAttributes: new { @class = "form-control" } )
  </div>
<div class="col-lg-2"></div>

Comments