Select2 with Twitter Bootstrap 3 / Dropdown Wrong Width

Question

I want to use select2.js in combination with twitter bootstrap 3. So far, everything is working fine, except for the fact that the Drop-Down container is the same width as the selection container itself.

By resizing the window, this phenomenon appears and disappears.

Here is an image showing the problem

And here is jsfiddle where you can try resizing. (Tested with IE 11 and FF 26) jsfiddle

And here is the code:

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.4.5/select2.css"> <div class="container"> <div class="row"> <div class="col-xs-3"> <select style="width:100%" class="select2"> <optgroup label="Test-group"> <option>test1</option> <option>test2</option> </optgroup> </select> </div> <div class="col-xs-3"> <select style="width:100%" class="select2"> <optgroup label="Test-group"> <option>test1</option> <option>test2</option> </optgroup> </select> </div> <div class="col-xs-3"> <select style="width:100%" class="select2"> <optgroup label="Test-group"> <option>test1</option> <option>test2</option> </optgroup> </select> </div> </div> </div> 

I tried to find a solution for hours, but I can not find a solution for this problem.

Thanks and best regards

Answer 1

Just insert your form using <form> , as here, and tell your choice to have class="form-control" . Follow the steps here http://getbootstrap.com/css/#forms-horizontal .

This will display your select2 combo correctly. Do not use style = **

Answer 2

The jQuery select2 has several CSS problems with Bootstrap3 .. fortunately there is a fix for these problems check this github project

All you have to do is add this css file or just add its contents to select2.css

The loan goes to Jeff Mold .

Answer 3

For me, just removing any additional style (inline link or class reference) from the select tag does the trick.

For example, the width for the drop-down list for the following was incorrect:

  <select class="select2 col-sm-10"> <option></option> <option>test1</option> <option>test2</option> </select> 

However, when I removed the col-sm-10 class link from select, the width of the dropdown was correct:

  <select class="select2"> <option></option> <option>test1</option> <option>test2</option> </select> 

The result is as follows:

Please note: if I also add this css file , the dropdown menu is better than doing nothing; See below. but I prefer to just remove all css styles (except select2) from select.