angular - PrimeNG 模态 p 对话框不可滚动

Question

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

我有一个满屏幕的数据表，我从中选择项目，这些项目作为模态对话框弹出。不幸的是，我无法滚动以在 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 包含另一个带有类 ui-dialog-content 的 div，其默认溢出属性为 auto。因此，要覆盖它，您需要在根级别进行设置。按照下面的插件。

注意:

• 使用 % 保持响应能力

• 还可以使用 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