CODEWITHSUNDEEP
javascriptangulartypescriptprimeng
HenryDev
HenryDev

Reputation: 4953

How to position Confirm Dialog over Dialog window?

I'm trying to position Confirm Dialog right over Dialog window but can't get it to work. In order to position my Dialog window based on user's click, I'm using positionTop and positionLeft, but these don't seem to work when working with Confirm Dialog. My question is how to show/move Confirm Dialog in the middle of Dialog window and NOT in the middle of the page?

NOTE:

Here's my code:

PLUNKER

<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="330"></p-confirmDialog>
<p-dialog appendTo = "body" header="Title" [(visible)]="display" modal="modal" width="350" height="300" positionLeft="{{positionLeft}}" positionTop="
{{positionTop}}">
{{personData}}
<button type="text" (click)="confirm()" pButton icon="fa-check" label="OPEN"></button>
</p-dialog>

Upvotes: 2

Views: 2058

Answers (1)

Antikhippe
Antikhippe

Reputation: 6655

Given positionLeftConfirmation and positionTopConfirmation the top left confirmation dialog coordinates. If you want this confirmation dialog to be centered inside the parent one, its left coordinate will be :

positionLeftConfirmation = positionLeft (of the parent dialog) + parentDialogWidth/2 - dialogWidth/2.

In your case, parentDialogWidth=350 and dialogWidth=330 so 

this.positionLeftConfirmation = this.positionLeft + (350-330)/2;

Similarly,

this.positionTopConfirmation = this.positionTop + (300-200)/2;

See working Plunker

Upvotes: 1

Related Questions