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

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

Inflight

In case anyone has the same thought I did, adding select2-bootstrap.css doesn't seem to help. (@user: Best to show in the question exactly what CSS you're loading, so people don't have to rely on the fiddle.) – Conde

Thank you for the hint and the try. I just added the css files used. – Inflight

Answer 1

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=**

Sherrie

Answer 2

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.

Industrials

Answer 3

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>

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:

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.

Interloper