Setting z-index on p-dialog overlays

[jrotondo]

I need to be able to control the z-index for both the overlay and the dialog box that comes along with p-dialog. I have several other elements with higher z-index that I need the modal to cover.

I was able to override the overlay like so:

Code: Select all

.ui-widget-overlay {
  background: #666666;
  opacity: .50;
  filter: Alpha(Opacity=50);
  z-index: 1500 !important;
}

But overriding the .ui-dialog doesn't seem to affect it whatsoever. Any thoughts?

[abhinav3414]

I also have similar issue, I am using modal dialogue and p-calendar inside it, but due to incremental z-index feature of primeNG, calendar goes in background as I click on modal.
Is there any fix provided by PrimeNG on this, other than setting z-index manually (at a higher value) to DOM handle.?

[jrotondo]

Honestly, I'm inches away from ditching the PrimeNG modal and going with something more flexible. I've spent hours trying to exert z-index control on the modal window with zero success. Seems like there are far more flexible options at the ready:

http://jasonwatmore.com/post/2017/01/24 ... dialog-box

[abhinav3414]

The issue has been fixed by prime Team.
https://github.com/primefaces/primeng/issues/3940