通过对话框隐藏的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>

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

Answer 1

有必要添加属性appendTo.

例如

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

Answer 2

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

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

或者

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

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

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

Answer 4

Angular/PrimeNG 12+

这对我有用：

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