PrimeNG模态p对话框不可滚动

Question

我以前曾提交过一个与此有关的问题，但也许我只是缺少一些东西，所以这是我的问题：

我有一个屏幕溢出的数据表，从中可以选择项目，这些项目会作为模式对话框弹出。不幸的是，我无法滚动来处理p对话框。

<p-dialog [style]="{'margin':'80px', 'overflow':'scroll'}">出于某种原因，这样做只会在模式对话框上创建一个水平滚动条。

更糟糕的是，滚动仍然在背景上进行，我想保持静止。

如何在p对话框上创建滚动（也是垂直的！）并将其聚焦，从而禁用背景的同时滚动？

另请参阅plunker：http：//plnkr.co/edit/6H0Q2Cm0184pLw3bto1h？p = preview

Answer 1

使用primeng v.7.0.3

对我来说，这解决了用垂直滚动条显示溢出对话框内容（对话框内的 p-listbox）的问题：

<p-dialog [contentStyle]="{'overflow-y': 'auto', 'overflow-x': 'hidden', 
                           'max-height': '80vh','min-height':'250px'}">
</p-dialog>

只需调整max-height即可使对话框页眉和页脚始终显示（页眉带有标题，页脚带有操作按钮：选择、取消），而对话框内容可滚动。

Answer 2

您应将滚动应用于p-dialog而不是ul标记，如下所示，

p-dialog .ui-dialog {
  overflow: scroll;
  max-height: 70%;
}

原因：p-dialog包含一个div，该div包含另一个带有ui-dialog-content默认溢出属性为auto的类的div 。因此，要覆盖它，您需要在根级别进行设置。请按照下面的代码。

注意事项：

• 使用%到preseve响应

• 还可以使用max-height属性设置模态的最大高度，超出该高度时滚动条将出现

要隐藏您应该按以下方式使用的背景，

<div [class.hide]="showDialog">
<p-dataTable [paginator]="false" [value]="data">
  <p-column header="Data">
    <ng-template pTemplate="body" let-rowData="rowData">{{rowData}}</ng-template>
  </p-column>
</p-dataTable>
</div>

如下添加一个类.hide，

.hide{
  opacity :0;
}

更新了LIVE DEMO