CODEWITHSUNDEEP
csstwitter-bootstrapjquery-select2
JonoB
JonoB

Reputation: 5887

Weird overflow issue in Twitter Bootstrap and Chrome

I have a Twitter Bootstrap well, which contains a Select2 component.

Demo can be viewed at http://jsfiddle.net/U4KTM/1/

There are two problems in Chrome (not evident in FF or IE):

The code in question is as follows:

<div class="well">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#panel1" data-toggle="tab">First tab</a></li>
        <li class=""><a href="#panel2" data-toggle="tab">Second tab</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="panel1">
            <div class="control-group">
                <label for="bar" class="control-label"></label>
                <div class="controls">
                    <select name="bar" class="selector">
                        <option value="0">First Option</option>
                        <option value="1" selected="selected">Second Option</option>
                        <option value="2">Third Option</option>
                    </select>
                </div>
            </div>                      
            <div class="control-group">
                <label for="bar" class="control-label"></label>
                <div class="controls">
                    <select name="bar" class="selector">
                        <option value="0">First Option</option>
                        <option value="1" selected="selected">Second Option</option>
                        <option value="2">Third Option</option>
                    </select>
                </div>
            </div>              
        </div>
    </div>
</div>

Upvotes: 3

Views: 1800

Answers (2)

Alao
Alao

Reputation: 400

I ran into this issue as well. Seems you need to make a slight change to the select2.js and comment out the height in the _makeMaskCss. This seem to happen with Bootstrap Responsive for me. The demo seems to work just fine.

function _makeMaskCss() {
            return {
                width  : Math.max(document.documentElement.scrollWidth,  $(window).width())//,
                //height : Math.max(document.documentElement.scrollHeight, $(window).height())
            }
        }

Upvotes: 0

AlexC
AlexC

Reputation: 9661

Try to overwrite this CSS class .tab-content:

with:

.tab-content {
      overflow:visible;
 }

The style is located in :

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css

line: 608

Upvotes: 4

Related Questions