Angular UI Bootstrap typeahead 不会像正常的 select 下拉列表一样超出父 div 边框
Angular UI Bootstrap typeahead does not extend past parent div border like a normal select dropdown
我正在使用 Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker。我尝试过使用 z-index 并调整位置和显示属性；所有徒劳的努力。
有谁知道如何让 typeahead 弹出窗口显示在其父边框上？如果没有，有没有办法强制 select 标签显示 HTML 内容，这样我就可以在建议列表中包含字形、强调文本等？
问题出在细长的滚动条上 - 您在 div 中，相对位置和溢出隐藏（将其视为 iFrame）。有一个小的解决方法......
您基本上可以将生成的 UL (.dropdown-menu) 的位置设置为 fixed，为其设置高度，然后设置 overflow:scroll...
它会在输入字段具有固定位置的某些情况下工作......否则你需要控制输入的位置并调整自动完成的位置以跟随，以及其他一堆讨厌的脚本。
如果不查看您的应用程序，我无法理解为什么您有这种特殊的架构，但我可以说必须有更简洁的选项来处理 slimscroll 之外的自动完成。
我只是在 typeahead 控件上设置了 typeahead-append-to-body="true" 并且它起作用了。不确定确切原因，但这肯定是一个简单的解决方案。
我正在使用 Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker。我尝试过使用 z-index 并调整位置和显示属性；所有徒劳的努力。
有谁知道如何让 typeahead 弹出窗口显示在其父边框上？如果没有，有没有办法强制 select 标签显示 HTML 内容，这样我就可以在建议列表中包含字形、强调文本等？
问题出在细长的滚动条上 - 您在 div 中，相对位置和溢出隐藏（将其视为 iFrame）。有一个小的解决方法...... 您基本上可以将生成的 UL (.dropdown-menu) 的位置设置为 fixed，为其设置高度，然后设置 overflow:scroll... 它会在输入字段具有固定位置的某些情况下工作......否则你需要控制输入的位置并调整自动完成的位置以跟随，以及其他一堆讨厌的脚本。
如果不查看您的应用程序，我无法理解为什么您有这种特殊的架构，但我可以说必须有更简洁的选项来处理 slimscroll 之外的自动完成。
我只是在 typeahead 控件上设置了 typeahead-append-to-body="true" 并且它起作用了。不确定确切原因，但这肯定是一个简单的解决方案。