Bug with PrimeNg Dialog when no header/footer are used

UI Components for Angular
Post Reply
Posts: 18
Joined: 21 Apr 2017, 14:30

27 Jul 2022, 11:26


I wanted to use a PrimeNG Dialog in order to build a busy indicator. I've the following code:

Code: Select all

<p-dialog [(visible)]="isBusy" [showHeader]="false" [resizable]="false" [modal]="true">
  <div class="flex flex-column justify-content-center align-items-center m-4">
    <div class="m-3">{{ message }}</div>
Functionally, it works, but when the dialog is shown, the dialog has not rounded border.

From what I've found, the issue is that the div.p-dialog has correctly rounded corner, but the div.p-dialog-content has not and takes the full space. So basically, the div.p-dialog-content hides the corner.
It doesn't happen when using header/footer, because then the header/footer has margins.

Adding this in the global styles works as workaround:

Code: Select all

.p-dialog-content {
  border-radius: 6px;

Posts: 18
Joined: 21 Apr 2017, 14:30

09 Aug 2022, 10:56

Actually my solution isn't working either, since when there are header/footer, the border radius is shown

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests