Bootstrap DatePicker has unwanted extra border in Asp.NET MVC

The datepicker field has an extra border that messes up the whole view. I can't find a set up where the calendar icon is in the right place (as it is now) and there is just a normal Editor field, aligned with the other fields.

<div class="form">
      <div class="row">
            <div class="form-group col-md-2">
                @Html.LabelFor(model => model.Destination.Country.CountryName, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.EditorFor(model => model.Destination.Country.CountryName, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })
            </div>

            <div class="form-group col-md-2">
                @Html.LabelFor(model => model.BookingDate, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class=" input-group date form-control">
                    @Html.EditorFor(model => model.BookingDate, new { htmlAttributes = new { @class = "form-control" } })
                    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                    @Html.ValidationMessageFor(model => model.BookingDate, "", new { @class = "text-danger" })
                </div>                
            </div>

            <div class="form-group col-md-2">
                @Html.Label("Status", htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.Editor("status", null, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })
            </div>
      </div>
</div>

resulting in: (for the datepicker)

<div class="form-group col-md-2">
    <label class="control-label col-md-2" for="BookingDate">BookingDate</label>
    <div class=" input-group date form-control">
        <input id="BookingDate" class="form-control text-box single-line" type="date" value="" name="BookingDate" data-val-required="The BookingDate field is required." data-val-date="The field BookingDate must be a date." data-val="true">
        <span class="input-group-addon">
        <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="BookingDate"></span>
    </div>
</div>

Answers


Remove form-control class from the parent div containing the BookingDate input. This solve the extra border around datepicker. But you have to make some changes to show in a proper way the form.

There are three ways to show forms in Bootstrap: horizontal, inline and using grid system. Based in your code:

Using grid to place controls side by side

<div class="row">
    <!-- More fields here -->
    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.BookingDate, htmlAttributes: new { @class = "control-label" })
            <div class="input-group date">
                @Html.EditorFor(model => model.BookingDate, new { htmlAttributes = new { @class = "form-control" } })
                <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
            </div>
            @Html.ValidationMessageFor(model => model.BookingDate, "", new { @class = "text-danger" })
        </div>
    </div>
    <!-- More fields here -->
</div>

Need Your Help

Make ImageView appear like in Safari Top Sies

iphone ios

You may have seen that images are placed in a curved screen when we open Safari browser and click on Net Tab. It is listed under top sites. So my question is I have a UIImageview and I need to make...

Why does ReadDirectoryChangesW omit events?

windows delphi filesystems delphi-2009 readdirectorychangesw

I use ReadDirectoryChangesW to watch a specified directory and update indexing structures whenever a change is detected. I use the following code (roughly)