对话框隐藏的 PrimeNG 下拉菜单答案

【问题标题】：PrimeNG dropdown hidden by dialog对话框隐藏的 PrimeNG 下拉菜单
【发布时间】：2017-03-21 22:47:45
【问题描述】：

我有一个使用 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>

如果有人可以就此提供任何建议，将不胜感激。

【问题讨论】：

在对话框上尝试 appendTo="body" 或从 ui-dialog-content div 中删除溢出。
你有没有解决这个问题 - 我也有同样的问题？ appendTo 和溢出的 css 添加似乎有帮助
@TheUnculledBadger 我已添加我的代码作为答案

标签： angular typescript primeng primeng-dropdowns primeng-dialog

【解决方案1】：

需要添加属性appendTo。

例如

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

【讨论】：

您的解决方案有问题，如果正文大于您的屏幕并且您可以滚动，下拉面板会随之移动，但您的对话框不会...
谢谢！也拯救了我的一天哈哈

【解决方案2】：

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

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

或

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

【讨论】：

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

【解决方案3】：

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

为每个需要能够溢出对话框的组件添加一个appendTo 部分。
```
<p-dialog>
    <p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
```
这种方法的问题：(a) 您需要为对话框中可能溢出的每个项目添加一个appendTo 部分，以及 (b) 如果对话框后面的页面足够大您可以滚动，溢出的下拉菜单将随页面滚动，而不是随对话框滚动。

首选方法：允许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 下，尽管文档没有说明如何正确显示页脚。

【讨论】：

[contentStyle]="{'overflow':'visible'}" 的问题是，如果对话框的大小调整为小于下拉菜单的高度，下拉菜单仍将显示在屏幕上，而不是在对话框缩小时隐藏
如果我用 p-dialog 包装一个下拉菜单，下拉菜单就会消失。

【解决方案4】：

这是对我有用的代码：

<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>

【讨论】：

您好.. 这确实改善了问题，它现在看起来不再像被切断了，但是，您是否在样式中添加了其他任何东西来增加 p-dropdown 容器的高度？

【解决方案5】：

将[autowidth]="false" 添加到p-dropdown

例如

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

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

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

【讨论】：

【解决方案6】：

Angular/PrimeNG 12+

这对我有用：

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

【讨论】：