PrimeNG 模态 p 对话框不可滚动

Question

我之前提交过关于此的 issue，但也许我只是遗漏了一些东西，所以这是我的问题：

我有一个屏幕溢出数据 table，我从中 select 项目，它们作为模态对话框弹出。不幸的是，我无法滚动以在 p-dialog 上工作。

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

更糟糕的是，滚动仍然在后台运行，我希望它是静态的。

如何在 p 对话框上创建滚动（也垂直！）并专注于它，禁用背景的同步滚动？

另见 plunker：http://plnkr.co/edit/6H0Q2Cm0184pLw3bto1h?p=preview

Answer 1

您应该将滚动应用到 p-dialog 而不是 ul 标签，如下所示，

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

原因：p-dialog 包含一个 div，其中包含另一个 div 和 classes ui-dialog-content默认溢出属性是自动的。因此，要覆盖它，您需要在根级别进行设置。跟随下面的plunker。

注意：

使用%保持响应能力
也可以使用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>

添加一个class .hide如下，

.hide{
  opacity :0;
}

已更新LIVE DEMO

Answer 2

您应该设置最小高度和最大高度。使用绝对值，而不是百分比...

.ui-dialog-content {
    max-height: 500px;
    min-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
}

要禁用背景滚动，请设置：

<body [ngClass]="'<class for overflow: hidden>': isMyDialogVisible" ...>

在显示对话框时将 isMyDialogVisible 设置为 true。

Answer 3

使用 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 即可让对话框 header 和页脚始终显示（header 带有标题，页脚带有操作按钮：Select、取消），而对话框内容是可滚动的。

PrimeNG 模态 p 对话框不可滚动

PrimeNG modal p-dialog not scrollable

angular

primeng