Primeng: p-dialog autolayering fails

[ASK83]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

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)
Here is a plunker that showcases the issue with the multiple dialog layering.
http://plnkr.co/edit/mqzjJhnUdtJLZ5v7IBJB?p=preview

Current behavior
Using the above punker one can see that the new overlay panels instead of appearing on top of the current dialog appears behind it, which is probably due to auto layering. This was working in the 5.2.0 and before which can be seen by changing the system js file to point to PRIMENG 5.2.0.

Expected behavior
autolayering should work and the newly added dialogs appear on top pf the last dialog. Also when re positing the parrent dialog it will go back to the center instead of changing it position according to the mouse position.

Minimal reproduction of the problem with instructions
the plucker case would show the problem.

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

Please tell us about your environment:

• Angular version: 2.0.X

  5.2.5

• PrimeNG version: 2.0.X
  5.2.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web
  All

• Language: [all | TypeScript X.X | ES6/7 | ES5]

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

[kucharzyk]

I have simliar problem with dropdowns on p-dialog.

After update to 5.2.1 most of them are rendered under the dialog.

[fperezgaliana]

Exactly the same problem here. After updating to 5.2.1, opening a p-confirmDialog or a p-dialog from another dialog always displays them underneath the opened one, so the user can't see them.

[lukgit17]

Same problem. Temporary workaround was to change in dialog.js template
(click)=\"moveOnTop()\" with (mouseDown)=\"moveOnTop()\" .

[orwtech]

Also having same problems with modal dialog on modal dialog and dropdown
CSS Zindex in first displayed dialog higher than Z-index on dialog opened from first dialog
appendTo="body" does not work either
Same goes for p-dropdown inside a p-dialog. Dropdown list opens behind the dialogs.
Setting appendTo="body" does not work

Angular version: 5.2.8

PrimeNG version: 5.2.1

Downgrade to PrimeNG 5.2.0 solved issues

[brian428]

The Dialog "ExpressionChangedAfterItHasBeenCheckedError" error in 5.2.0 was fixed in 5.2.1, but now this is another total blocker. We're still stuck at version 5.0.2. :-/

[brian428]

Actually, overriding the style like:

.ui-tieredmenu,
.ui-tieredmenu .ui-menu-child {
  z-index: 5000 !important;
}

Seems to (mostly) work, as a temporary hack.

[brian428]

After some trial and error, it seems easier to force the z-index on the Dialog than to do it on the overlays the dialog could contain:

.ui-dialog {
  z-index: 1000 !important; /* TODO: primeng: temporary fix for 5.2.1 bug #5271 */
}

[dhniels]

im having this problem with as well. this is a _MAJOR_ bug. Hopefully primeNG team can resolve this with a hotfix release.

@cagataycivici this breaks everything inside dialogs - growl messages, dropdowns, overlaypanels, everything. im shocked this made it through to a release!

[dhniels]

@brian428 that solution only works if you're not using modal="true" otherwise the ui-dialog-mask covers up the dialog.

i tried overriding that ones z-index to 999 but it has to be done from the global stylesheet.
.ui-dialog {z-index: 1000 !important;}
.ui-dialog-mask {z-index: 999 !important;}

hopefully this works. i need to test more.

[cagataycivici]

5.2.2 is now published with this fix and others;

https://www.primefaces.org/primeng-5-2-2-released/

[dhniels]

Thank god! Awesome response time @cagataycivici 🙌