ng-select 下拉位置在可滚动 div 中不正确答案

【问题标题】：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）。它将打开可用的选项。现在通过在笔记本电脑鼠标键盘上使用两根手指滚动/从鼠标滚动。

非常感谢任何帮助。

提前致谢。

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

<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

【讨论】：