出现时，JQuery“Chosen”下拉列表被削减

Question

我使用JQuery“Chosen Dropdownns”插件，并且有一个问题，当下拉列表出现在里面 模态形式它切割和显示只是部分，虽然选择选择的父div有css属性overflow: visible

通常情况下，当我使用默认选择而没有任何样式时，它可以正常工作

也许某人有同样的问题或可以提供任何解决方案？

HTML：

<div class="addNewLicense" style="overflow:visible;">
<table>
    <tr>
        <td>
            <span>Start date: </span>
        </td>
        <td>
            <input type="text" id="startLicenseDate" placeholder="Start Date..." style="width: 200px; height: 24px;" />
        </td>
    </tr>
    <tr>
        <td>
            <span>End date: </span>
        </td>
        <td>
            <input type="text" id="endLicenseDate" placeholder="End Date..." style="width: 200px; height: 24px;" />
        </td>
    </tr>
    <tr>
        <td>
            <span>State Name: </span>
        </td>
        <td>
            <select id="stateLicenseSelect" style="width: 205px; height: 30px;">

            </select>
        </td>
    </tr>
</table>

使用Javascript：

    $("#stateLicenseSelect").chosen({ width: "200px", disable_search: true });
    $(".addNewLicense").dialog('open');

Answer 1

jQuery UI模式默认溢出隐藏值，以防止任何超大对象离开框边界。它不会从浏览器中裁剪本机UI控件，因为它会破坏用户体验规则，但对于脚本生成的UI，它会。选择使用一些绝对定位元素替换选择输入元素，这些元素将被隐藏溢出切割。

要防止出现此问题，只需从jQuery UI覆盖溢出隐藏属性：

.ui-dialog{
overflow: visible !important;
}

我在这里做了一个简单的例子：http://jsfiddle.net/e57gase7/

如果您尝试删除示例中的CSS，则看起来就像是您的问题。

Answer 2

尝试将您选择的内容替换为select2。它具有更多功能，应该适用于您的情况。

Answer 3

.mCSB_container {
overflow:visible !important;
}

为我工作!!!

Answer 4

此代码对我有用：

   $(function () {
       $("#YourDropDownID").parent().css("overflow", "visible");
   })

当您不知道父div / dialog的类或ID时，这很有用