PrimeNG modal p-dialog not scrollable

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.

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

Answer 1

You should apply scrolling to the p-dialog and not for the ul tag as below,

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. So to override it you need to set at the root level. Follow the below 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

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{
  opacity :0;
}

Updated LIVE DEMO