【问题标题】:Angular-UI typeahead directive does not drop downAngular-UI typeahead 指令不下拉
【发布时间】:2016-04-30 07:07:30
【问题描述】:

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

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

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

【问题讨论】:

    标签: css angularjs angular-ui


    【解决方案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">
    

    【讨论】:

    • OMG - 原来是这样...感谢您解释为什么! Огромное спасибо :)
    • 酷,很高兴它有帮助。 Незачто))
    • viewvalue 是做什么的?
    • @UsmanIqbal 检查 typeahead 文档:angular-ui.github.io/bootstrap/#!#%2Ftypeahead
    猜你喜欢
    • 2014-03-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-29
    • 1970-01-01
    相关资源
    最近更新 更多