Javascript jqWidgets选项卡内的jQuery Selected下拉列表未正确呈现_Javascript_Jquery_Css_Jquery Chosen_Jqxwidgets

Javascript jqWidgets选项卡内的jQuery Selected下拉列表未正确呈现

javascript jquery css

Javascript jqWidgets选项卡内的jQuery Selected下拉列表未正确呈现,javascript,jquery,css,jquery-chosen,jqxwidgets,Javascript,Jquery,Css,Jquery Chosen,Jqxwidgets,我正在使用jqWidgets选项卡，在选项卡内容中包含jQuery选择的下拉列表我遇到的问题是，当我单击打开下拉列表时，div会被夹在选项卡底部-我希望下拉列表的弹出窗口会覆盖所有内容并完全显示出来请参见以下基本示例以重现该行为：我如何通过对他们的任何一个样式表进行最小程度的黑客攻击来解决这个问题 <html> <div style="width : 500px; height : 180px;"> <div id="tabs"> <ul

我正在使用jqWidgets选项卡，在选项卡内容中包含jQuery选择的下拉列表

我遇到的问题是，当我单击打开下拉列表时，div会被夹在选项卡底部-我希望下拉列表的弹出窗口会覆盖所有内容并完全显示出来

请参见以下基本示例以重现该行为：

我如何通过对他们的任何一个样式表进行最小程度的黑客攻击来解决这个问题

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



试验

测试：
$（“#制表符”）.jqxTabs({
位置：'顶部'，
animationType:“淡入淡出”，
selectionTracker：对，
高度：'180px'
});
//以下几行仅用于用一些值填充示例下拉列表
var html=''；
对于（变量x=0；x<100；x++）{
html+=''+x+''；
}
$（#target”）.html（html）；
//将所选库应用于此下拉列表
$（“#目标”）.selected（）；

请查看我没有复制文档的fiddle代码。上面代码片段中的ready调用问题在于所选下拉列表所在的div容器具有设置的高度。因此，如果选择的扩展超出容器div的高度，那么它将被切断。您可以尝试添加到所选下拉列表：

position: absolute

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

谢谢您的建议。我查看了所选的css，看起来它们已经将position:absolute应用于类“chzndrop”