如何将选择的下拉列表扩展到包含它的对话框之外

Question

我在 jQuery UI 对话框中使用 Chosen 设置了 Html.DropDownList 样式。项目列表足够长，打开时列表被对话框的边框截断 window。

有没有办法将“选择”下拉列表的下拉部分扩展到包含它的对话框的边界之外？

我希望结果类似于 this.

HTML:

<div class="ui-dialog" id="deleteControl">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        @Html.DropDownList("fileName", Model.fileDropdown, "", new { id = "fileDropdown", onchange = "$('#deleteDocName').val($('#fileDropdown').val())", style = "display:inline;" })
    </div>
    <!--Removed code for a button row here-->
</div>

JavaScript:

$("select").chosen();

$("#deleteControl").dialog({
    autoOpen: false,
    title: "Remove Documents",
    modal: true,
    resizable: false,
    width: "60%"
});

渲染HTML:

<!--Removed unrelated code-->
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" role="dialog" aria-labelledby="ui-dialog-title-deleteControl" style="outline: 0px; left: 319px; top: 421.5px; width: 60%; height: auto; display: block; z-index: 1002;">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-deleteControl">Remove Documents</span><a class="ui-dialog-titlebar-close ui-corner-all" role="button" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog ui-dialog-content ui-widget-content" id="deleteControl" style="width: auto; height: auto; min-height: 100px;" scrolltop="0" scrollleft="0">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        <select name="fileName" id="fileDropdown" style="display: none;" onchange="$('#deleteDocName').val($('#fileDropdown').val())">
            <option value=""></option>
            <option value="Modal Test">Modal Test</option>
            <option value="Second Rename">Second Rename</option>
            <option value="Test">Test</option>
            <option value="Inner Test">Inner Test</option>
        </select>
        <div title="" class="chosen-container chosen-container-single" id="fileDropdown_chosen" style="width: 389px;"><a tabindex="-1" class="chosen-single chosen-default"><span> </span><div><b></b></div></a>
            <div class="chosen-drop">
                <div class="chosen-search">
                    <input type="text" autocomplete="off">
                </div>
                <ul class="chosen-results">
                    <li class="active-result" data-option-array-index="1">Modal Test</li>
                    <li class="active-result" data-option-array-index="2">Second Rename</li>
                    <li class="active-result" data-option-array-index="3">Test</li>
                    <li class="active-result" data-option-array-index="4">Inner Test</li>
                </ul>
            </div>
        </div>
    </div>
</div></div>

Answer 1

我们真的需要看一些代码。

但是如果你看一下这个 fiddle http://jsfiddle.net/lharby/bvfuLp3z/ 我已经限制了父包装的高度并且下拉列表延伸到它下面（当然在 Chrome 中）。

CSS:

.wrapper {
    background:powderBlue;
    height:50px;
}

HTML:

<select id="actionInput01" name="action">
                        <option value="">Go to</option>
                        <option value="ViewTransactions">View transactions</option>
                        <option value="MyPayees">Pay or view existing payees</option>
                        <option value="SetUpANewPayment">Set up a new payment</option>
..... etc

编辑

溢出隐藏可能存在问题，但如果此解决方案不起作用，我认为绝对定位也可能有所帮助，但正如我提到的，您需要共享一些代码。

Answer 2

可以，请检查 fiddle。 https://jsfiddle.net/nileshmahaja/aj2ra56q/

HTML

<div class="ui-dialogue">

    <select>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
    </select>
</div>

CSS

.ui-dialogue {
    width:400px;
    height:100px;
    background:#999;
    border:solid 1px #000;
}

在这种情况下，您需要为包装器提供固定高度。您的包装器 div 可能有 overflow:hidden 属性通过 CSS 应用的情况，确保将其更改为 overflow:visible.

如何将选择的下拉列表扩展到包含它的对话框之外

How to extend a Chosen drop down beyond the dialog that contains it

html

jquery

jquery-ui

jquery-ui-dialog

jquery-chosen