问题描述:

I have a form in that form , Publish_Date_From field and Publish_Date_To field text boxes overlap on their labels

like following picture

this is the relevant code snippet to above section

<div class="row">

<div class="col-xs-6">

<div class="form-group">

@Html.LabelFor(m => m.Publish_Date_From, htmlAttributes: new { @class = "control-label col-md-2" })

<div class="col-md-10">

@Html.TextBoxFor(m => m.Publish_Date_From, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })

@Html.ValidationMessageFor(model => model.Publish_Date_From, "", new { @class = "text-danger" })

</div>

</div>

</div>

<div class="col-xs-6">

<div class="form-group">

@Html.LabelFor(m => m.Publish_Date_To, htmlAttributes: new { @class = "control-label col-md-2" })

<div class="col-md-10">

@Html.TextBoxFor(m => m.Publish_Date_To, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })

@Html.ValidationMessageFor(model => model.Publish_Date_To, "", new { @class = "text-danger" })

</div>

</div>

</div>

</div>

how to align them properly ?

网友答案:

Try this out:

<div class="row">
<div class="col-xs-6">
    <div class="form-group">
        @Html.LabelFor(m => m.Publish_Date_From, htmlAttributes: new { @class = "control-label col-xs-6" })
        <div class="col-xs-6">
            @Html.TextBoxFor(m => m.Publish_Date_From, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
            @Html.ValidationMessageFor(model => model.Publish_Date_From, "", new { @class = "text-danger" })
        </div>
    </div>
    </div>

    <div class="col-xs-6">
        <div class="form-group">
            @Html.LabelFor(m => m.Publish_Date_To, htmlAttributes: new { @class = "control-label col-xs-6" })
            <div class="col-xs-6">
                @Html.TextBoxFor(m => m.Publish_Date_To, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
                @Html.ValidationMessageFor(model => model.Publish_Date_To, "", new { @class = "text-danger" })
            </div>
        </div>            
     </div>

Or this:

<div class="row">
 <div class="col-xs-6">
  <div class="form-group">
   <div class="col-xs-6">
    @Html.LabelFor(m => m.Publish_Date_From, htmlAttributes: new { @class = "control-label" })
   </div>            
    <div class="col-xs-6">
      @Html.TextBoxFor(m => m.Publish_Date_From, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
      @Html.ValidationMessageFor(model => model.Publish_Date_From, "", new { @class = "text-danger" })
    </div>
   </div>
 </div>
</div>
相关阅读:
Top