Angular-UI typeahead 指令不下拉

Question

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

我修改了样式，我看到 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">