Primeng: p-dialog and p-confirmDialog not centered when set appendTo body

[nguyenhoangphuc289]

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

Current behavior
Dialog and ConfirmDialog appendTo body not center

Expected behavior
Dialog and ConfirmDialog appendTo body must be centered.

Please tell us about your environment:

• Angular version: 8.2.11

• PrimeNG version: 9.0.0-rc.3

• Browser: Chrome

[ThorstenKunz]

Angular version: 9.0.4

PrimeNG version: 9.0.0

Browser: Chrome

I have a very similar issue. If I create a modal dialog with appendTo="body" the dialog doesn't event show. The screen gets locked with the mask but that is it. Not dialog appears.

[sven42]

Angular version: 9.0.4
PrimeNG version: 9.0.0
Browser: Chrome

I have the same issue as ThorstenKunz: the dialog is not visible with appendTo="body".

Without this being set, the dialog is visible, but with [modal]="true" it has an opacity of 0.5 due to parent divs class "ui-widget-overlay"

Update:

• We still have this problem with primeng 9.0.6.
• However, it seems to be caused by our usage of a deprecated and removed formerly free scss style.
• When using the new styles, the dialog appeared as expected.
• We resolved the issue by defining "ui-widget-overlay" in old, deprecated, removed and locally copied "_primeng.scss" as follows:

.ui-widget-overlay { background-color: rgba(#666666, 0.5); }

[jakub-tucek]

Angular version: 9.0.2
PrimeNG version: 9.0.0
Browser: Chrome

Same issues - if appended to body, dialog position must be styled manually. If not appended, opacity is 0.5. This would be ok workaround, except overlay is missing for modal in production build, which is kinda strange.

[dloprodu]

Angular version: 9.0.4
PrimeNG version: 9.0.0
Browser: Chrome

I have the same issue. It seems that the dialog mask is kept in the local component meanwhile the content is appended to the body. In previous versions, dialog-mask and dialog were appended to the body.

[lxrave]

Hi. I have the same issue after I was upgraded MyApp to PrimeNG 9.0.0
All dialogs broken when appendTo="body" - displaying only overlay without any content

Angular version: 9.0.5
PrimeNG version: 9.0.0
Browser: Chrome

[zakharenkov]

Hi. I have the same issue after I was upgraded MyApp to PrimeNG 9.0.5