Primeng: Background mask covers modal Dialog in certain layouts

[Cito]

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
[ ] support request => Please do not submit support request here

Plunkr Case (Bug Reports)

The problem is explained and demonstrated here:

http://plnkr.co/edit/XydqEYDjBHxmEdyVUyy6?p=preview

Current behavior

In certain layouts, the modal dialog box is covered by the darkened background mask.

Expected behavior

The modal dialog box should work with all kinds of layouts. Only the rest of the page should be covered by the darkened background mask, not the dialog box.

Minimal reproduction of the problem with instructions

See Plunker above.

Alternatively, add style="position:fixed" to the top-level layout-wrapper element of the app.component of the PrimeNG showcase app. Start the showcase and click Overlay -> Dialog -> Show.

What is the motivation / use case for changing the behavior?

I'm using PrimeNG with a layout that consits of various fixed parts. In this case, the modal dialog of PrimeNG cannot be used any more.

Please tell us about your environment: Not relevant here.

• Angular version: 4.3.6

• PrimeNG version: 4.2.0

• Browser: Chrome 61 | Firefox 56 | Edge 40

• Language: TypeScript 2.3.4

• Node (for AoT issues): node --version = 8.4.0

[cagataycivici]

You can just do;

<p-dialog appendTo="body"></p-dialog>

[Cito]

Thank you for the quick response. I can confirm this resolves the issue.

I should have read the docs more carefully, since they mention appendTo. But maybe you can add this as another use case in the docs, which currently recommend using appendTo only "when the dialog includes other components with overlays". The other use case would be that the dialog is inside a layout element which has its own stacking context.

[Andras-Csanyi]

Hi, would it possible to add this workaround to the documentation? For example this one does not have this workaround: https://www.primefaces.org/primeng/#/table/crud