Overflow issue on Twitter Bootstrap and Chrome

Question

I have a Twitter bootstrap that contains the Select2 component.

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

There are two problems in Chrome (this is not obvious in FF or IE):

• Chrome has an overflow problem causing vertical scrollbars in the well. This seems to solve the following css:

  .tab-content {overflow: hidden; }

• The second problem in Chrome is that selecting an item in the bottom drop-down list causes a strange problem with jumping in the well, and then part of the well’s content disappears from the top.

This code 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> 

Answer 1

Try rewriting this CSS .tab-content class:

with:

 .tab-content { overflow:visible; } 

Style is located in:

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

: 608

Answer 2

I ran into this problem. It seems you need to make a small change to select2.js and comment out the height in _makeMaskCss. This is like Bootstrap Responsive for me. The demo seems to be working fine.

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