PrimeNG模态对话框不可滚动

Question

I previously submitted an issue about this, but maybe I am just missing something, so here is my problem: 我之前提交了一个关于此的问题，但也许我只是遗漏了一些东西，所以这是我的问题：

I have a screen-overflowing data table, from which I select items, which pop up as modal dialogs. 我有一个屏幕溢出的数据表，我从中选择项目，弹出为模态对话框。 Unfortunately I cannot get scrolling to work on the p-dialog. 不幸的是我无法滚动到p对话框。

Doing <p-dialog [style]="{'margin':'80px', 'overflow':'scroll'}"> only creates a horizontal scroller on the modal dialog for some reason. 执行<p-dialog [style]="{'margin':'80px', 'overflow':'scroll'}">只会出于某种原因在模态对话框中创建一个水平滚动条。

And to make things worse, the scrolling still works on the background, which I want to be static. 更糟糕的是，滚动仍然适用于背景，我希望它是静态的。

How do I create scrolling (vertical too!) on a p-dialog and focus on it, disabling simultaneous scrolling of the background? 如何在p对话框上创建滚动（垂直！）并专注于它，禁用同时滚动背景？

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

Answer 1

You should apply scrolling to the p-dialog and not for the ul tag as below, 您应该将滚动应用于p-dialog而不是如下所示的ul标记，

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

Reason : p-dialog contains a div which contains another div with classes ui-dialog-content whose default overflow property is auto. 原因： p-dialog包含一个div，其中包含另一个具有类ui-dialog-content的div，其默认溢出属性为auto。 So to override it you need to set at the root level. 因此要覆盖它，您需要在根级别设置。 Follow the below plunker. 按照下面的plunker。

Note : 注意：

Use % to preseve responsiveness 使用%来预先提供响应
Also use max-height property to set a maximum height of the modal beyond which the scroll bar appears 还可以使用max-height属性设置模式的最大高度，滚动条出现在该高度之外

To hide the background you should be using as below, 要隐藏您应该使用的背景，如下所示，

<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>

Add a class .hide as below, 添加一个类.hide ，如下所示，

.hide{
  opacity :0;
}

Updated LIVE DEMO 更新了现场演示

Answer 2

You should set the min-height and max-height. 您应该设置最小高度和最大高度。 Use absolute values, not percentages... 使用绝对值，而不是百分比......

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

For disabling background scroll, set: 要禁用背景滚动，请设置：

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

where you set isMyDialogVisible to true while the dialog is being displayed. 在显示对话框时将isMyDialogVisible设置为true的位置。

Answer 3

Using primeng v. 7.0.3 使用primeng v.7.0.3

For me this did the trick about having overflow dialog content (a p-listbox inside the dialog) display with vertical scrollbar: 对我来说，这有关于使用垂直滚动条显示溢出对话框内容（对话框内的p列表框）的技巧：

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

Just tweaking max-height can get the dialog header and footer to always display (header with title, and footer with action buttons: Select, Cancel), while the dialog content was scrollable. 只需调整max-height就可以使对话框页眉和页脚始终显示（带标题的页眉，带有操作按钮的页脚：选择，取消），同时对话框内容可滚动。

PrimeNG模态对话框不可滚动

问题描述

3 个解决方案

解决方案1
5 已采纳 2017-05-27 20:12:09

解决方案2
1 2017-08-28 09:42:57

解决方案3
1 2019-07-17 01:33:05

PrimeNG模态对话框不可滚动

问题描述

3 个解决方案

解决方案1 5 已采纳 2017-05-27 20:12:09

解决方案2 1 2017-08-28 09:42:57

解决方案3 1 2019-07-17 01:33:05

解决方案1
5 已采纳 2017-05-27 20:12:09

解决方案2
1 2017-08-28 09:42:57

解决方案3
1 2019-07-17 01:33:05