Angular-UI typeahead指令不会下拉

Question

我正在使用AngularUI typeahead指令。数据方面一切正常;但是，Dropbox是垂直切割的，右侧会显示一个滚动条。下图显示了我的意思。如果我向下滚动，我会看到预期的typeahead保管箱中的所有值。

我修改了样式，我看到来自AngularUI的.dropdown-menu样式定义为position: absolute;如果我将其更改为position: static;，则下拉列表显示为全高;但是，如果我在输入字段下方有一个按钮 - 它显示在下拉列表的右侧，而不是被它覆盖。再一次，一张图片胜过千言万语。

“母版页”级别有一些样式;但我不知道究竟是什么导致了这种行为。显然，我的CSS / Web设计技能已经不多了。

Answer 1

问题是你的容器有overflow: hidden，当然它会削减预先输入的下拉列表。在这种情况下，您需要告诉typeahead将下拉容器附加到另一个父容器，通常是body。为此，您使用其他配置属性typeahead-append-to-body。像这样：

<input type="text" 
       ng-model="selected" 
       uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"
       typeahead-append-to-body="true">