Question

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

我有一个屏幕溢出的数据表，我从中选择项目，弹出为模态对话框。不幸的是，我无法滚动到p对话框。

执行def gcd (m,n): if n == 0: return m else: return gcd(n, m % n) def lcm (m,n): return m * n / gcd(m,n) print(lcm(12,24)) # 24只会出于某种原因在模态对话框中创建水平滚动条。

更糟糕的是，滚动仍然适用于背景，我希望它是静态的。

如何在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，其中包含另一个类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

Answer 2

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

ArticleSpComponent.html:26 ERROR TypeError: Cannot read property 'outlets' of null
    at createNewSegmentGroup (router.es5.js:2967)
    at updateSegmentGroup (router.es5.js:2896)
    at router.es5.js:2914
    at forEach (router.es5.js:593)
    at updateSegmentGroupChildren (

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

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

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

Answer 3

使用primeng 7.0.3版

对我来说，这样做的窍门是使用垂直滚动条显示溢出的对话框内容（对话框内部的p-listbox）：

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

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

PrimeNG模态对话框不可滚动

3 个答案: