p-dialog appendTo='body' issues with 9.0.0-rc.4

UI Components for Angular
Post Reply
Posts: 1
Joined: 15 Jul 2019, 17:49

13 Feb 2020, 23:31

Hello all,

Is anyone having issues with the appendTo='body' option on p-dialog since upgrading to to Angular 9 and PrimeNG 9.0.0-rc.4?

All the dialogs I use are no longer showing for me. The screen does not even have the full grey overlay, some other elements are showing above it.


Posts: 4
Joined: 18 Jan 2018, 17:37

17 Feb 2020, 16:31

The issues I'm seeing don't seem to have anything to do with appendTo="body", but perhaps they'll be helpful to someone anyway.

For me, my dialogs were showing with a 0.5 opacity. I suspect the reason I personally am seeing issues is because I use the Avalon theme and it is not NG9 compatible yet. ui-dialog-wrapper (also known as ui-widget-overlay) having an opacity = 0.5 and the child ui.dialog opacity = 1 doesn't work since opacity doesn't override that way.

Had to fix it using rgb alpha like so:

body .ui-widget-overlay {
opacity: unset;
background-color: rgba(0, 0, 0, .5);

Posts: 29
Joined: 19 Sep 2018, 02:52

20 Feb 2020, 19:30

Hey Thanks for your question, it caused me to look at the property.
I use appendTo='body' property once in my code. Per my documentation, I was using it because dialog containing a dialog. But when, I ran it, the window was positioned poorly (bottom off the bottom of the screen). I just removed the property and it still worked, but was positioned correctly.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests