PrimeNG modal p-dialog not scrollable

user_4125622 0
Viewed 21451

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.

Doing <p-dialog [style]="{'margin':'80px', 'overflow':'scroll'}"> only creates a horizontal scroller on the modal dialog for some reason.

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?

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

primeng angular
3 Answers

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

user_19600710
Related