【问题标题】:ng-select drop down position is not correct in scroll able divng-select 下拉位置在可滚动 div 中不正确
【发布时间】:2021-07-27 14:37:09
【问题描述】:

在可滚动的 div 中使用 ng-select 时,我遇到了问题。 请找到屏幕截图 -

问题:搜索文本框和下拉框之间出现差距,市中心应该随着搜索输入框移动。 要重现该问题 - https://stackblitz.com/edit/ng-select-uygqu1?file=app%2Fapp.component.ts

单击第一个下拉菜单(ng-select)。它将打开可用的选项。 现在通过在笔记本电脑鼠标键盘上使用两根手指滚动/从鼠标滚动。

非常感谢任何帮助。

提前致谢。

【问题讨论】:

  • 您好,大家好运。请帮忙。

标签: css angular drop-down-menu angular-material angular-ngselect


【解决方案1】:

您将下拉菜单附加到正文,而不是 ng-select ,因此根据定义,它将根据正文计算 ng-select 的位置,即最后收到的位置。

不会更新一旦你滚动打开的位置(不支持),你需要在滚动发生时关闭下拉菜单(不支持ng-select - issue is currently opened - 链接中的支持也给出了建议),然后根据需要打开下拉菜单。

即使你不关闭下拉菜单,并且它在滚动时奇迹般地更新了位置,即使 ng-select 隐藏在溢出中,下拉菜单也会显示,这看起来不太好。

我建议在滚动发生时关闭下拉菜单。您不能同时拥有绝对定位并将其显示在表格之外,然后在隐藏 ng-select 时将其隐藏。可能是 JQuery,但对此了解不多。

【讨论】:

    【解决方案2】:

    我用下一个方法解决了这个问题:

    • 删除appendTo="body"
    • overflow: visible 添加到ng-select
    <ng-select
      style="overflow: visible;"
      ...
    </ng-select>
    

    【讨论】:

      【解决方案3】:

      确保下拉菜单的位置是相对的,并且没有应用额外的间距

      【讨论】:

        【解决方案4】:
        ::ng-deep .ng-dropdown-panel {
            left: 0 !important;
            right: 0 !important;
            margin: 0 auto;
        }
        
        //this worked for me perfectly fine
         
        

        【讨论】:

        • 请不要只发布代码作为答案,还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助,质量更高,更有可能吸引投票。
        • 非常感谢您的建议,我会努力改进我的答案
        猜你喜欢
        • 2017-01-02
        • 2017-11-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多