我正在将jqWidgets选项卡与选项卡内容内的jQuery Chosen下拉列表一起使用
我遇到的问题是，当我单击以打开下拉列表时，div会在选项卡的底部被剪切掉-我希望下拉菜单的弹出窗口可以覆盖所有内容并完全显示
请参见下面的基本示例以重现行为：
http://jsfiddle.net/mPwWW/
我该如何通过最小化两个样式表中的任何一个来解决这个问题？
<html>
<div style="width : 500px; height : 180px;">
<div id="tabs">
<ul>
<li>Test</li>
</ul>
<div>
<label>Test:</label>
<select id="target" style="width : 80px"></select>
</div>
</div>
</div>
</html>
<script>
$("#tabs").jqxTabs({
position : 'top',
animationType : 'fade',
selectionTracker: true,
height : '180px'
});
// the following lines are just for filling the sample dropdown with some values
var html = '';
for (var x = 0; x < 100; x++) {
html += '<option value="'+x+'">'+x+'</option>';
}
$("#target").html(html);
// apply the chosen library to this dropdown
$("#target").chosen();
</script>
请在上面的代码段中查看我没有复制document.ready的小提琴代码
最佳答案
问题是选择下拉菜单所在的div容器具有设置的高度。因此，如果选择的延伸范围超出了容器div的高度，则它将被切除。您可以尝试添加到“选择的”下拉列表中：
position: absolute
这样，它将被带出页面的正常流程，换句话说，它不仅限于其父容器的高度。
关于javascript - jqWidgets选项卡中的jQuery选择下拉列表未正确呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15255504/