javascript - 出现时 JQuery "Chosen"下拉菜单被 chop

Question

我使用 JQuery“Chosen Dropdowns”插件并且有一个问题，当下拉菜单出现在里面时它仅部分剪切和显示模态形式，尽管所选选择的父 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 模态框默认带有隐藏值溢出，以防止任何超大对象离开框边界。它不会从浏览器裁剪 native UI 控件，因为它会破坏用户体验规则，但对于脚本生成的 UI，它会。 Chosen 用一些绝对定位的元素替换 select 输入元素，这些元素将被剪切并 overflow hidden 。

为防止此问题，您只需从 jQuery UI 覆盖溢出隐藏属性:

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

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

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