css - Weird overflow issue in Twitter Bootstrap and Chrome -
i have twitter bootstrap well, contains select2 component.
demo can viewed @ http://jsfiddle.net/u4ktm/1/
there 2 problems in chrome (not evident in ff or ie):
there overflow issue in chrome causing vertical scrollbars in well. seems solved following css:
.tab-content { overflow: hidden; }
the second problem in chrome selecting item in bottom dropdown causes weird jumping issue in well, , of content dissapears off top.
the code in question 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>
try overwrite css class .tab-content
:
with:
.tab-content { overflow:visible; }
the style located in :
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css
line: 608
Comments
Post a Comment