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

EG

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

Answer 2

这是适合我的代码：

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

Answer 3

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

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

要么

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

Answer 4

有两种主要方法可以解决此问题：

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下，尽管文档没有解释如何正确显示页脚。

Answer 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}']