PrimeNG下拉菜单被对话框遮挡

Question

我有一个使用PrimeNG组件的Angular2应用。

我想在对话框内部放置一个下拉菜单。然而，当我实现时，下拉菜单被对话框的限制截断，如下面的屏幕截图所示。我想要的是它显示在对话框上方，并且所有选项都可见。

这只是一个小对话框，我不想为此创建一个大对话框，因为会有很多空闲未使用的空间。

我的HTML代码如下：

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" minHeight="200">
    <div class="row col-md-12" align="center">
        <button pButton (click)="viewRepack()" label="View Repack"></button>
    </div>
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
    <button pButton label="Save" (click)="save()" style="float:right;margin-right:3px;margin-top:5px;"></button>
</p-dialog>

如果有人能够对此提供任何建议，将不胜感激。

- DaRoGa

---

尝试在对话框上添加appendTo="body"属性，或者从ui-dialog-content div中删除overflow。 - Cagatay Civici

你解决过这个问题吗？我也遇到了同样的问题。appendTo和overflow CSS添加似乎都没有帮助。 - The Unculled Badger

@TheUnculledBadger 我已将我的代码添加为答案。 - DaRoGa

Answer 1

需要添加一个属性 appendTo。

例如：

<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>

- esdef

---

如果页面内容比屏幕更大，需要使用滚动条来查看内容，但是下拉面板会随着滚动而移动，而对话框不会。 - SteamFire

Answer 2

以下内容来自官方 NG Prime 文档。 当对话框中包含其他叠加组件，例如下拉菜单时，由于溢出，叠加部分不能超过对话框边界。为了解决这个问题，您可以将叠加附加到 body 中，或者允许对话框中的溢出。

<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>

或者

 <p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>

- Igor Radovanovic

---

我是这样做的 appendTo=".p-dialog-content" - Abdullah Tahan

Answer 3

解决这个问题有两种主要方法：

1. 对于每个需要能够溢出对话框的组件，添加一个appendTo部分。

   <p-dialog>
       <p-dropdown appendTo="body"></p-dropdown>
   </p-dialog>
   

   这种方法存在的问题： (a) 您需要在对话框中可能溢出的每个项目中添加appendTo部分，(b) 如果对话框后面的页面足够大以便您可以滚动，那么溢出的下拉菜单将会随着页面一起滚动，而不是对话框。

2. 首选方法：允许p-dialog溢出。

<p-dialog [contentStyle]="{'overflow':'visible'}">
   <p-dropdown></p-dropdown>
</p-dialog>

如果您正在使用 p-footer，您可能还需要在您的 css 文件中包含以下内容，以确保页脚正确显示（这基本上是将类 ui-g-12 添加到包含页脚的 div 中）:

p-dialog /deep/ .ui-dialog-footer {
   width: 100%;
   float: left;
   box-sizing: border-box;
   padding: .5em;
}

注意：这两个解决方案都列在PrimeNG Doc for p-dialog下，尽管文档没有解释如何正确显示页脚。

- Steven Hoffman

---

[contentStyle]="{'overflow':'visible'}" 的问题在于，如果对话框调整大小小于下拉列表的高度，则下拉列表仍将显示在屏幕上，而不是随着对话框缩小而隐藏。 - Elliott

如果我用p-dialog包装一个下拉菜单，那么这个下拉菜单就会消失。 - SkogensKonung

Answer 4

Angular/PrimeNG 12+

这对我很有效：

  <p-dialog [contentStyle]="{'overflow':'visible'}"></p-dialog>

- Sampath

Answer 5

这是对我有效的代码：

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" resizable="true">
    <div class="row col-md-12" align="center" style="overflow-y:visible">
        <button pButton (click)="ViewRepack()" label="View Repack"></button>
    </div>
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width:'200px', position:'fixed'}"></p-dropdown>
    <button pButton label="Save" (click)="ChangeTable()" style="float:right;margin-right:3px;"></button>
</p-dialog>

- DaRoGa

---

嗨，那肯定改善了问题，现在它不再看起来像被截断了，但是，你是否在样式中添加了其他内容以增加p-dropdown容器的高度？ - The Unculled Badger

Answer 6

在 p-dropdown 中添加 [autowidth]="false"

例如

<p-dropdown [options]="colors" [(ngModel)]="selectedColor"
            [autoWidth]="false"></p-dropdown>

编辑：此外，您可以在组件中使用以下样式来调整下拉菜单的宽度。

styles: [':host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']

- Piero