0

我在标签内容中使用带有 jQ​​uery Chosen 下拉菜单的 jqWidgets 标签

我遇到的问题是，当我单击打开下拉菜单时，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 调用的小提琴代码

4

1 回答 1

0

问题是 Chosen 下拉列表所在的 div 容器具有设定的高度。因此，如果 Chosen 超出了容器 div 的高度，那么它将被切断。您可以尝试添加到选择的下拉列表中：

position: absolute

这样，它将脱离页面的正常流程，换句话说，不受其父容器的高度限制。

于 2013-03-06T19:02:00.210 回答