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