CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3
XWiśniowiecki
XWiśniowiecki

Reputation: 1843

Bootsrap 3: bootstrap-select and input-group-addon

I have two input-groups put into form-groups. The first one has three group addons and everything looks right. The second one with bootstrap-select has two addons, one on the left, second on the right, and this is causing bootstrap-select having rounded corners, although it is placed between two addons. Moreover if I leave there just one addon it looks fine.

<div class="form-group">
    <div class="input-group" id="dateOfBirthDiv">
        <span class="input-group-addon">
            @Html.Label("Data urodzenia")
        </span>
        @Html.TextBox("dateOfBirth", null, new { @class = "form-control" })
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </span>
        <span class="input-group-addon" style="min-width: 42px;">
        </span>
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">
            @Html.Label("Płeć")
        </span>
        @Html.DropDownList("patientSex", new SelectList(SelectListHelpers.sexSelectListHelper, "Value", "Text"), "-- wybierz --", new { @class = "selectpicker form-control" })
        <span class="input-group-addon" style="min-width: 42px;">
        </span>
    </div>
</div>

The code is Razor syntax but I think everybody will understand that DropDownList is changed to <select>. Then bootstrap-select change it in its way.

I think it can be like that because is hidden by bootstrap-select but why it is working with one addon? Has anybody meet similar problems?

View

Upvotes: 2

Views: 4829

Answers (2)

Darek MST
Darek MST

Reputation: 117

My symilar code works. You should try remome form-group block or add some empty select element next to your select and remove it via js on document ready.

My code:

<div class="container"><div class="col-md-2">
<div class="input-group"><a href="keyboard-new"><span class="btn btn-primary">Nowy</span></a></div></div>           
    <div class="col-md-4">
    <div class="input-group"> 
    <span class="input-group-addon">
          lalalalala
        </span>
    <select id="searchcolumn" class="form-control">
    <option value="NAZWA">Nazwa</option>
    </select> 
     <span class="input-group-addon">
          lalalalala
        </span>
       </div>
    </div>
</div>

looks correct:generated page

Upvotes: 1

XWiśniowiecki
XWiśniowiecki

Reputation: 1843

It is bootstrap-select failure. It puts <button> in <div>. The <div> has form-control class but its color is transparent and <button> has no form-control class that is responsible for border-radius managment. Even if I add form-control class to <button> with jQuery the button is the first element in <div> so it has rounded corners on the left side and square on the right :) solution is $('#patientSex').next('div.bootstrap-select').children('button.dropdown-toggle').css('border-radius', '0px');.

Upvotes: 1

Related Questions