CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-selectpicker
babboe2 babboe2
babboe2 babboe2

Reputation: 85

Bootstrap col-md-12, col-sm-12 doesn't work with bootstraps selectpicker

I need to use bootstrap selectpicker, it looks good if I have large screen, but if I reduce the screen size my selects layered, but I want to show them separately.

JSFiddle: https://jsfiddle.net/nastya2410/4o2umka6/5/

For show the select I use:

<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
    <select class="selectpicker show-tick">
        <option>1</option>
        <option>2</option>
    </select>
</div>

How can I solve my problem? Thanks!

Upvotes: 1

Views: 995

Answers (3)

Haroon Aslam
Haroon Aslam

Reputation: 1653

<select class="selectpicker show-tick col-xs-12">

use responsive class in the select tag it works

Upvotes: 0

Samuil Petrov
Samuil Petrov

Reputation: 553

Your quickest way is to remove this absolute positioning style:

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width:180px;
    left: 0;
    /* position: absolute; */ /* This is being removed */
}

Upvotes: 0

Linkliman
Linkliman

Reputation: 86

You apply your width to a div not to your selector You have several solution :

  • Apply col-lg-2 col-md-2 col-sm-12 col-xs-12 on your selector

  • Add this css property to your selector : select{width:inherit;}

Upvotes: 1

Related Questions