PrimeNG dialog append to body cannot apply styles

Posted on by

When I use p-dialog and pass appendTo="body" then the dialog is displayed correctly but I cannot apply a style using class.

<p-dialog header="Edit and Scale" [(visible)]="display" modal="true" [style]="{width: '80vw'}" [baseZIndex]="10000000"
[draggable]="false" [resizable]="false" (onHide)="onClose()">
</p-dialog>

enter image description here

But when I remove appendTo="body" then my styles work fine but the overlay masks cover the app.

<p-dialog header="Edit and Scale" [(visible)]="display" modal="true" [style]="{width: '80vw'}" [baseZIndex]="10000000"
    [draggable]="false" [resizable]="false" (onHide)="onClose()" appendTo="body">
    </p-dialog>

enter image description here

Any help?

Thanks in advance..

Source: Angular Questions