Angular UI Bootstrap typeahead不會像正常選擇下拉菜單那樣延伸超過父div邊框

Question

我使用Angular UI Bootstrap typeahead在用戶鍵入到文本輸入表單控件中時顯示一個自定義的建議列表。這個表單控件存在於一個使用jQuery slimScroll的div內部，以便儘管其內容大小波動，仍然保持不變的div大小。我真的希望typeahead能夠像普通的html選擇下拉菜單一樣顯示所有內容，但不幸的是，它沒有，正如在plunker中可以看到的那樣。我試着用z-index來調整位置和顯示屬性;所有沒有結果的努力。

有人知道如何讓typeahead彈出窗口顯示在其父邊框上嗎？如果沒有，是否有辦法強制選擇標籤來顯示HTML內容，這樣我可以在建議列表中包含圖形，強調文本等內容？

Answer 1

我只是在typeahead控件上設置了typeahead-append-to-body =「true」，它工作正常。不確切的原因，但它確實是一個簡單的解決方案。

Answer 2

問題是與苗條滾動 - 你是在一個div的相對位置和溢出隱藏（認爲它是一個iFrame）。有一個小的解決方法... 你可以，基本上設置生成的UL（.dropdown菜單）的位置爲固定，爲其設置高度，然後設置溢出：滾動... 它會工作在某些情況下，輸入字段的位置是固定的......否則，您需要控制輸入的位置，並調整自動完成的位置以及其他一些惡意腳本。

沒有看你的應用程序，我不明白爲什麼你有這個特定的架構，但我可以說，必須有更清晰的選項來處理slimscroll以外的自動完成。