blog icon indicating copy to clipboard operation
blog copied to clipboard

PrimeNG p-dialog 垂直滚动

Open ryancui92 opened this issue 7 years ago • 0 comments

Dialog 组件当 content 过多时需要可滚动,根据文档这么写

<p-dialog appendTo="body" [modal]="true"
  [width]="700" [height]="400" [contentStyle]="{'overflow': 'auto'}">
</p-dialog>

特么这样是不行的,并没有滚动条出现,看 style 发现是 CSS 的 height 未指定导致 overflow 失效,所以要在 style 里指定 max-height. 这里设置 [height] 属性并没有在 CSS 上设置相应的 height 值。

<p-dialog appendTo="body" [modal]="true"
  [width]="700" [contentStyle]="{'max-height': '400px', 'overflow': 'auto'}">
</p-dialog>

使用 max-height 替代 height 可以使 dialog 在超出高度才 scroll

ryancui92 avatar Jul 19 '17 03:07 ryancui92