JQuery的“选择了”下拉切出现

当使用jQuery“被选中的下拉框”插件，并有一个问题，当下拉菜单出现内部模式的形式，它切的和显示的只是部分，虽然选择的选择父div有CSS属性overflow: visibleJQuery的“选择了”下拉切出现

enter image description here

通常情况下，当我使用默认的选择，没有任何造型它的工作好

enter image description here

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

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');

来源

2014-10-02 Alex44

你的代码在哪里？编辑的 – Anon 2014-10-02 09:54:42

也通过单独的Ajax-Request选择内容init，然后选择选择更新。 – Alex44 2014-10-02 10:01:42

@ Alex44你也可以提供你的CSS吗？ – Fenistil 2014-10-02 10:21:55

jQuery UI的情态动词有默认是隐藏的价值溢出，即防止任何超大物体离开箱边界。它不会裁剪来自浏览器的原生UI控件，因为它会破坏用户体验规则，但对于脚本生成的UI，它将会。选择的作品用一些绝对定位的元素来替换选择的输入元素，这些元素将被溢出隐藏。

为了避免这个问题，你只需从jQuery UI的覆盖溢出隐藏属性：

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

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

如果试图在本例中去除CSS，它会看起来像你的问题。

来源

2014-10-02 11:43:28 marcovega

非常感谢！有用。 – Alex44 2014-10-02 12:38:58

感谢的人，它的工作 – Milan 2014-12-01 06:46:43

因为最初可能有浏览器支持的问题：它可能会更好： '.ui-dialog-content {overflow：visible; }' – mikewasmike 2015-09-29 09:21:10

尝试用select2代替您的选择。它具有更多的功能，应该适合您的情况。

来源

2014-10-02 12:27:25 Fenistil

很适合这种情况 – ryan2johnson9 2016-07-08 03:23:55

.mCSB_container { 
overflow:visible !important; 
}

为我工作！

来源

2015-02-23 18:17:27

多一点描述会有所帮助。 – Styphon 2015-02-23 21:43:38

JQuery的“选择了”下拉切出现

回答

相关问题