PrimeNG: dialog doesn't get responsive after init

Question

I have angular app with p-dialog component from PrimeNG 4.2.2

The dialog shows dynamical content (there is a table inside). If the table doesn't feet on full screen it should show scrollbar so the user will be able to see elements from the footer of the dialog.

The issue is that the dialog gets responsive only after resizing of the browser window. After dialog initialization the dialog doesn't feet into the screen, interface elements from the footer are not visible. It gets into the normal state only after resize.

I use the following declaration:

<p-dialog *ngIf="displayDialog" [(visible)]="displayDialog" 
        [responsive]="true" [modal]="true" 
        width="800" minWidth="850">
</p-dialog>

Q: Does someone know how to make dialog responsive after it appears on the screen? Or maybe it is a bug? Is there any workaround?

Currently, I'm thinking of generating resize event manually after dialog initialization.

Sasha Shpota Sasha Shpota · Accepted Answer · 2017-11-08T15:00:13

I found a workaround using CSS:

I wrapped content of the dialog element into a div with a specific style:

<p-dialog ...>
    <div class="ui-grid ui-grid-responsive ui-fluid"
         style="overflow-y: auto; max-height: calc(100vh - 250px);">
        ...content
    </div>
</p-dialog>

It doesn't look ideal, but works fine.

Another option was to trigger resize event:

window.dispatchEvent(new Event('resize'));

It worked as well, but required some delayed call which is not nice.

PrimeNG: dialog doesn't get responsive after init

1 Answers