对话框隐藏的 PrimeNG 下拉菜单
PrimeNG dropdown hidden by dialog
我有一个使用 PrimeNG 组件的 Angular2 应用程序。
我想要一个对话框内的下拉菜单。然而,当我实现这个时,下拉列表被对话框的限制切断,如下面的屏幕截图所示。我想要的是它显示在对话框上方并显示所有选项。
这只是一个小对话框,我不想为此创建一个大对话框,因为会有很多空的未使用 space。
我的 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>
如果有人能对此提供任何建议,我们将不胜感激。
这是对我有用的代码:
<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>
需要添加属性appendTo
。
例如
<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
将 [autowidth]="false"
添加到 p-dropdown
例如
<p-dropdown [options]="colors" [(ngModel)]="selectedColor"
[autoWidth]="false"></p-dropdown>
编辑:另外,您可以在组件中使用以下样式调整下拉菜单的宽度
styles: [':host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']
有两种主要方法可以解决这个问题:
为每个需要能够溢出对话框的组件添加一个 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 文件中包含以下内容以确保页脚正确显示(这实际上是添加 class 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 下列出了这两种解决方案,但文档并未说明如何使页脚正确显示。
这来自 NG Prime 官方文档。
当dialog包含其他有overlay的组件如dropdown时,overlay部分不能因为overflow超出dialog的边界。为了解决这个问题,您可以将叠加层附加到正文或允许在对话框中溢出。
<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>
或
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>
Angular/PrimeNG 12+
这对我有用:
<p-dialog [contentStyle]="{'overflow':'visible'}"></p-dialog>
我有一个使用 PrimeNG 组件的 Angular2 应用程序。
我想要一个对话框内的下拉菜单。然而,当我实现这个时,下拉列表被对话框的限制切断,如下面的屏幕截图所示。我想要的是它显示在对话框上方并显示所有选项。
这只是一个小对话框,我不想为此创建一个大对话框,因为会有很多空的未使用 space。
我的 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>
如果有人能对此提供任何建议,我们将不胜感激。
这是对我有用的代码:
<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>
需要添加属性appendTo
。
例如
<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
将 [autowidth]="false"
添加到 p-dropdown
例如
<p-dropdown [options]="colors" [(ngModel)]="selectedColor"
[autoWidth]="false"></p-dropdown>
编辑:另外,您可以在组件中使用以下样式调整下拉菜单的宽度
styles: [':host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']
有两种主要方法可以解决这个问题:
为每个需要能够溢出对话框的组件添加一个
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 文件中包含以下内容以确保页脚正确显示(这实际上是添加 classui-g-12
到包含页脚的div
:p-dialog /deep/ .ui-dialog-footer { width: 100%; float: left; box-sizing: border-box; padding: .5em; }
注意:PrimeNG Doc for p-dialog 下列出了这两种解决方案,但文档并未说明如何使页脚正确显示。
这来自 NG Prime 官方文档。 当dialog包含其他有overlay的组件如dropdown时,overlay部分不能因为overflow超出dialog的边界。为了解决这个问题,您可以将叠加层附加到正文或允许在对话框中溢出。
<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>
或
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>
Angular/PrimeNG 12+
这对我有用:
<p-dialog [contentStyle]="{'overflow':'visible'}"></p-dialog>