PrimeNg p-dialog not being centered on first display

Question

I'm building an angular 2 application, and am building a dialog modal form, using PrimeNg p-dialog. I'm noticing that in some instances, the dialog window is being displayed at the far left of the screen (rather than being centered). However, on dragging the browser window, the dialog gets centered correctly.

I'm using a very simple dialog (as per primeng documentation), and afterwards setting display to true:

<p-dialog header="Title" [(visible)]="display">
    Content
</p-dialog>

Any ideas why the dialog is not being centered from the beginning?

Answer 1

This worked for me:

From the component I get a reference to the dialog like so:

import { Dialog } from 'primeng/dialog';
...
@ViewChild(Dialog) dialog;

And in the function that causes the dialog to open I call the center method in a setTimeout.

window.setTimeout(() => { this.dialog.center(); });

Answer 2

After investigating further I found out that the issue was that the dialog was wrapped around in an ngIf. After removing that, the positioning was corrected.

Answer 3

I had an similar issue. The dialog position was on the far right of the screen.

In my case I use the responsive property and therefore i had to set a specific width for the width property.

<p-dialog  
    width="640"
    modal="modal" 
    dismissableMask="true" 
    [responsive]="true"
    [(visible)]="display">