Select2 with Twitter Bootstrap 3 / Dropdown wrong width

Question

I want to use select2.js in combination with twitter bootstrap 3. Everything works fine so far, except the fact, that the Drop-Down container has not the same width as the select container itself.

By resizing the window this phenomen appears and disappears.

Here is a picture that shows the issue width issue

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

And here also 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 now, but I can't find a solution for that issue.

Thank you and best regards

In case anyone has the same thought I did, adding `select2-bootstrap.css` [doesn't seem to help](http://jsfiddle.net/AgwA4/1/). (@user: Best to show in the question exactly what CSS you're loading, so people don't *have* to rely on the fiddle.) — T.J. Crowder, Feb 01 '14 at 11:40
Thank you for the hint and the try. I just added the css files used. — user1895259, Feb 01 '14 at 12:04

score 9 · Answer 1 · answered Mar 10 '14 at 10:36

9

Just embed your form with a <form> like here and tell your select to have a class="form-control". Follow the steps here http://getbootstrap.com/css/#forms-horizontal.

This will show your select2 combo correctly. Don't use style=**

answered Mar 10 '14 at 10:36

Rodrigo Asensio

2,760
4
26
26

ebram khalil · Answer 2 · 2015-03-27T15:31:46.170

5

The jQuery plugin select2 has some series CSS issues with Bootstrap3 .. fortunately, there is a fix to these issues, check out this github project

All you need to do is to add this css file or simply append its contents to select2.css

Credit goes to Jeff Mould.

edited Mar 27 '15 at 15:31

answered Jun 23 '14 at 07:53

ebram khalil

8,252
7
42
60

l3x · Answer 3 · 2015-04-13T18:29:48.113

For me, simply removing any additional styling (inline or class reference) from the select tag does the trick.

For example, the width for dropdown for the following was incorrect:

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

enter image description here

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

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

The result looks like this:

enter image description here

Note that if I also add this css file, the dropdown is better than without doing anything; See below. but I prefer to simply remove all css styles (except select2) from select. enter image description here

Select2 with Twitter Bootstrap 3 / Dropdown wrong width

3 Answers3