CODEWITHSUNDEEP
angularprimeng
user2707674
user2707674

Reputation: 333

PrimeNg p-dialog not being centered on first display

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?

Upvotes: 3

Views: 11924

Answers (3)

stephan.peters
stephan.peters

Reputation: 1107

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(); });

Upvotes: 7

iOS-Trainee
iOS-Trainee

Reputation: 253

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">

Upvotes: 1

user2707674
user2707674

Reputation: 333

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.

Upvotes: 2

Related Questions