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

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

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.