Angular-UI typeahead 指令不下拉

Question

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

我修改了样式，发现 AngularUI 中的 .dropdown-menu 样式被定义为 position: absolute; 如果我将其更改为 position: static;，下拉菜单将以全高显示；但是，如果我在输入字段下方有一个按钮 - 它显示在下拉列表的右侧，而不是被它覆盖。同样，一张图片胜过一千个单词。

"master page"级别有部分款式；但我不知道究竟是什么导致了这种行为。显然，我运行的 CSS/Web 设计技能不足。

Answer 1

问题是您的容器有 overflow: hidden，当然它会减少 typeahead 的下拉菜单。在这种情况下，您需要告诉 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">

Angular-UI typeahead 指令不下拉

Angular-UI typeahead directive does not drop down

css

angularjs

angular-ui