我有一个Twitter Bootstrap,它包含一个Select2组件。
可以在http://jsfiddle.net/U4KTM/1/
查看演示Chrome中存在两个问题(在FF或IE中不明显):
Chrome中存在溢出问题,导致井中出现垂直滚动条。这似乎可以通过以下css解决:
.tab-content { 溢出:隐藏; }
Chrome中的第二个问题是,选择底部下拉列表中的项目会导致井中出现奇怪的跳跃问题,然后一些井内容量会从顶部消失。
有问题的代码如下:
<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>
答案 0 :(得分:4)
尝试覆盖此CSS类.tab-content
:
使用:
.tab-content {
overflow:visible;
}
该风格位于:
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css
line:608
答案 1 :(得分:0)
我也遇到了这个问题。似乎你需要对select2.js稍作修改并在_makeMaskCss中注释掉高度。这似乎发生在Bootstrap响应我。该演示似乎工作正常。
function _makeMaskCss() {
return {
width : Math.max(document.documentElement.scrollWidth, $(window).width())//,
//height : Math.max(document.documentElement.scrollHeight, $(window).height())
}
}