Setting z-index on p-dialog overlays

UI Components for Angular
Post Reply
jrotondo
Posts: 4
Joined: 21 Jun 2017, 17:31

12 Sep 2017, 19:22

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
Posts: 3
Joined: 14 Sep 2017, 08:08

14 Sep 2017, 08:47

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
Posts: 4
Joined: 21 Jun 2017, 17:31

14 Sep 2017, 14:52

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
Posts: 3
Joined: 14 Sep 2017, 08:08

17 Nov 2017, 09:54

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests