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的「選擇了」下拉切出現

回答

相關問題