CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3jquery-select2
user1895259
user1895259

Reputation: 147

Select2 with Twitter Bootstrap 3 / Dropdown wrong width

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

Upvotes: 6

Views: 22892

Answers (3)

l3x
l3x

Reputation: 31246

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

Upvotes: 0

ebram khalil
ebram khalil

Reputation: 8321

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.

Upvotes: 5

Rodrigo Asensio
Rodrigo Asensio

Reputation: 2792

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

Upvotes: 9

Related Questions