自動完成問題到引導模式

我有一個模式對話框引導內的jQuery自動完成顯示問題。自動完成問題到引導模式

當我滾動鼠標時，結果不會保留附加到輸入。

有沒有辦法解決這個問題？

.ui-autocomplete-input { 
    border: none; 
    font-size: 14px; 
    width: 300px; 
    height: 24px; 
    margin-bottom: 5px; 
    padding-top: 2px; 
    border: 1px solid #DDD !important; 
    padding-top: 0px !important; 
    z-index: 1511; 
    position: relative; 
}

編輯我發現這個問題：

.ui-autocomplete { 
    position: fixed; 
    ..... 
}

如果模式具有滾動問題依然！

這裏JsFiddle/1。

來源

2013-04-21 Lughino

的立場是正確的，這是「絕對的」，當你需要指定此作爲一個選項autocomplete：

$(".addresspicker").autocomplete("option", "appendTo", ".eventInsForm");

如果能夠錨定在任何元素的結果中，我有阻止它被錨定到表單的類！

這裏is a working JsFiddle!。

來源

2013-04-21 18:04:33 Lughino

完美無瑕的勝利！ – 2013-05-20 16:28:46

工作很棒！ – 2014-02-14 06:26:38

確切的解決方案。 – caglaror 2014-05-14 07:48:18

實際的問題是Bootstrap Modal比頁面中的任何其他元素具有更高的Z-index。因此，自動完成實際工作 - 但它隱藏在對話框後面。

你只需要在你的任何添加css文件的補充一點：

.ui-autocomplete { 
    z-index:2147483647; 
}

來源

2013-04-29 08:41:10 Sunil

問題不僅僅是這樣，並且通過將參數z-index設置得如此之高來解決任何問題！問題不僅在於它仍然在模態之下，而且如果您使其滾動頁面，結果不會保留附加到輸入，並且如果你重新閱讀這個問題將很好解釋。但是，問題已解決，請參閱上面的答案！ – Lughino 2013-04-30 13:42:48

上述解決方案在談論z-index問題的工作：

.ui-autocomplete { z-index:2147483647; }

確保你把你的.js前負責處理模態和自動完成邏輯的腳本。

來源

2013-08-08 15:05:42

如果您閱讀與您的答案完全相同的其他答案的評論，則問題不會以這種方式解決！ – Lughino 2013-08-08 15:29:07

爲我工作。無論如何說話者。 – KingOfHypocrites 2015-03-18 19:58:13

完美。沒有JS。使用CSS，這是最好的解決方案。 – 2017-11-06 03:08:24

Check out the appendTo documentation：

當值是空值，則輸入字段的父母會檢查一類的UI-前的。如果找到一個具有ui-front類的元素，菜單將被追加到該元素。

所以類「UI-前」只需添加到父元素，並自動完成將模態中正確顯示。

來源

2014-07-29 17:57:20

輝煌，謝謝。 – Sam 2015-07-22 00:37:37

與基金會5揭示模式很好的作品。 – 2015-11-22 01:02:35

爲了解決這個問題我只需要通過的jQuery在css文件變更：

.ui-front { 
    z-index: 9999; 
}

來源

2015-10-08 15:41:14 dsandrade

添加appendTo選項解決了這個問題。它將菜單附加到引導模型中的一個對象上。

來源

2016-01-08 22:44:40

只是嘗試添加此：

.ui-autocomplete { 
 
    z-index: 215000000 !important; 
 
}

只要確保你給一個高價值的財產和DO新增

!重要

真的很重要。後者會告訴你的瀏覽器先執行這個規則，然後再在同一個類的其他任何一個之前執行。希望它會幫助

來源

2016-01-20 15:38:57

這不是響應式設計 – gtzinos 2016-04-25 20:29:01

我不明白你@gtzinos – 2016-09-21 09:38:02

隨着添加類「ui前」到div父元素和自動完成將正確顯示內彈出我。

來源

2016-07-16 13:39:30 Skarimi

雖然接受的答案會起作用，但我覺得這應該是正確的答案，因爲文檔指出這是默認行爲：'如果一個元素帶有ui -front類被找到，菜單將被追加到該元素' – cman77 2016-10-13 16:09:39

這應該是被接受的答案。 – 2017-10-24 09:15:42

-1

.ui-front { 
    z-index: 9999; 
} 

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog ui-front"> 
     <div class="modal-content"> 
      <div class="modal-header"> 

      </div> 
      <div class="modal-body"> 

      </div> 
     </div> 
    </div> 
</div>

來源

2016-09-28 15:33:32

我這個解決....

/******************************************************************** 
*   CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt * 
********************************************************************/ 
ul[id*='_completionListElem'] { 
    z-index: 215000000 !important; 
}

自動完成擴展完成列表有一個utomated ID這樣 ID = '_completionListElem'

所以你必須推升z-index ..上然後自舉模態面板;）

希望它有幫助

來源

2017-09-11 16:42:52 user5541665

自動完成問題到引導模式

回答

相關問題