时间戳

首页 > 解决方案 > 下拉菜单在 jquery ui 模式对话框中被切断

javascript - 下拉菜单在 jquery ui 模式对话框中被切断

问题描述

使用select2在jquery.ui.dialog. 问题是当下拉菜单打开时，它不会像本机那样溢出对话框，<select>而只是将对话框高度推得更大。

如何select2从文档流中分离下拉菜单以使菜单不会被切断？

我已经尝试增加下拉菜单z-index并更改jquery.ui.dialog溢出规则。但这些似乎都没有任何效果。

<div id="myDialog">   
    <select id="myselect">
      <option>Select2Foo</option>
      <option>Select2Bar1</option>
      <option>Select2Bar2</option>
      <option>Select2Bar3</option>
      <option>Select2Bar4</option>
      <option>Select2Bar5</option>
    </select>
</div>

$("#myDialog").dialog({
    autoOpen  : true,
    modal     : true,
    title     : "A Dialog Box",   
    width: "90%",
});


$('#myselect').select2({
  dropdownParent: $('#myDialog')
})

它“切断”/在文档流中推动模态更大。 在此处输入图像描述

我宁愿希望它表现得像本机选择 在此处输入图像描述

小提琴：

http://jsfiddle.net/anmatika/dy3am21n/1/

标签： javascriptcssjquery-select2jquery-ui-dialog

解决方案

自从它开始工作以来回答我自己的问题，这可能对其未来的其他人有所帮助。

jquery.ui.dialog.ui-dialog在要作为对话框的元素周围创建一个包装器。

您需要同时设置对话框元素和 jquery.ui 对话框包装器overflow: visible。

.ui-dialog,
#myDialog {
  overflow: visible;
}

https://jsfiddle.net/anmatika/dy3am21n/22/

推荐阅读