ng-select inside 对话框添加额外的隐藏高度答案

【问题标题】：Ng-select inside dialog add extra hidden heightng-select inside 对话框添加额外的隐藏高度
【发布时间】：2021-07-09 00:19:41
【问题描述】：

在对话框内使用 ng-select 时，下拉菜单的内容不会显示在对话框外并溢出。我也在github上看到了这个问题，但是没有找到解决办法。

https://github.com/ng-select/ng-select/issues/240

演示：https://stackblitz.com/edit/angular-material2-issue-yesgfz

我该如何解决这个问题？

预期行为：

实际行为：

来自 github 的解决方案 [appendTo]="'body'"

【问题讨论】：

解决方案[appendTo]="'body'" 不像 github 票证上所说的那样工作吗？
我用 [appendTo]="'body'" 编辑了这个问题
看起来它能够退出对话框，可以尝试将其z-index 更新为比对话框高得多的值吗？
我会 +1 这个问题，因为 [appendTo]="'body'" 确实为我工作。我在位于mat-expansion-panel 内的组件中有一个ng-select 元素，底部的内容会被截断。

标签： angular

【解决方案1】：

在你的 ng-select 标签上粘贴 appendTo="body"

<ng-select appendTo="body" [items]="data" bindLabel="name" bindValue="id" placeholder=""></ng-select>

【讨论】：

【解决方案2】：

即使可能不理想，您也可以这样做

<div style="display: block; height: 40px;">
  <ng-select [searchable]="false" style="position: absolute; width: 200px;">
    <ng-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </ng-option>
  </ng-select>
</div>

需要一些固定值，但绝对位置可以解决您的问题，稍微摆弄一下 css 可能会以一种不错的方式为您提供您想要的结果。

编辑：Stackblitz link

【讨论】：

非常适合我的目的。谢谢
Position="absolute" 在 IE 中不起作用。关于如何让它在 IE 中工作的任何改变？
评论声明您必须为绝对定位元素父级设置相对位置，但不知道这是否适用。但是很确定网络上有很多解决方案，然后随时编辑帖子。