Primeng: p-dialog - Scroll page when modal content overflows

[MarkPerryBV]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/bm9K9viM1R8BaXRPxLHh?p=preview

Current behavior
When modal content grows longer than the screen height then the content is not reachable.

Expected behavior
I expect to be able to scroll to the content I need. I would ideally like the scroll bar at the page level not inside the dialog.

I also realise you have a fix pending for the body class when the modals is open to stop the background from scrolling. I this this is a separate issue.

Minimal reproduction of the problem with instructions
See plunkr.

• Add a p-dialog
• Add a lot of vertical content into dialog
• Bottom of content in dialog is no longer reachable

What is the motivation / use case for changing the behavior?
Using accordions in modals with dynamic content.

• Angular version: 2.0.X
  Latest

• PrimeNG version: 2.0.X
  Latest

• Browser: [all]

• Language: [all]

[ajambrovic]

You can add [style]="{'position':'absolute'}" as a temporary fix.

[cagataycivici]

Or fixed height to [contentStyle]="{'height': '450px'}" so content overflows.

[MarkPerryBV]

The fixed height on contentStyle doesnt work on mobile devices as the bottom of the modal can still be off the screen.

[TheAvalanche]

You can add following css to your component so it would scroll.

::ng-deep p-dialog .ui-dialog {
    overflow: scroll;
    max-height: 100%;
}

About blocking background from scrolling...
This feature is undocumented for some reason. But you can block body from scrolling by adding [blockScroll]=true to your p-dialog component.

For example:

<p-dialog header="Title" [(visible)]="showDetailsModal" [modal]="true" [draggable]="false" [positionLeft]="0" [positionTop]="0" [blockScroll]="true">
...
</p-dialog>

[pablobello92]

As @TheAvalanche said, using ::ng-deep along with [blockScroll] will be enough, but in some cases you might use, for example: "max-height: 480px;" in order to fix the dialog height, enabling the scrollbar.

[thenninger]

@TheAvalanche This does not work for me when the contents uses bootstrap classes like .row because it is floated. My content still overflows some - meaning it shows a scroll, but it doesn't scroll enough.

Edit: I believe this is not due to the floated contents, but rather the top positioning set by the call to .center(). As a workaround, I set a [positionTop] and instead of calling the center method, just called the positionOverlay method.

[Local9]

Any one visiting this page... if you're using dynamic content its recommended to use the following;

[contentStyle]="{'max-height':'50vh'}"

Adjust the view height as needed. CanIUse vh

[thibault-mahe]

To get the whole dialog component to scroll, and not only its inner content, I put the p-dialog component inside a c-dialog-overflow component, inside the template, as such :

<div class="c-dialog-overflow" *ngIf="dialogDisplay">
    <p-dialog [visible]="dialogDisplay">...</p-dialog>
</div>

With the following css :

.c-dialog-overflow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-y: scroll;
}

Note that I also had to hide the overflow component (the *ngIf) when the dialog isn't displayed.