CODEWITHSUNDEEP
cssangulartypescriptprimeng
HenryDev
HenryDev

Reputation: 4953

How to hide overlay when using Confirm dialog and set its position in PrimeNG?

I'm working with a Dialog window and Confirm dialog. When I first get the dialog window the overlay gets display (This is expected), but when I click on the OPEN CHART button I get the Confirm dialog but its overlay is all over (meaning that I can't do anything on the page anymore), so my questions are:

1) How to hide the overlay of the Confirm Dialog so that I can click on either yes or not buttons?

2) How to set the position of the Confirm Dialog? I've been using positionTop and positionLet for the Dialog and it works great!, but I cant get it to work with the Confirm Dialog. I simply want the Confirm dialog to go over the Dialog window.

NOTE: In order to see the Dialog window just click on any row of my table.

Here's my working code: PLUNKER

<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="330"></p-confirmDialog>

<button type="text" (click)="confirm()" pButton icon="fa-check" label="OPEN CHART"></button>

Upvotes: 0

Views: 3939

Answers (1)

jriver27
jriver27

Reputation: 880

This worked for me... I moved the p-confirmDialog outside the p-dialog

<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 CHART"></button>
</p-dialog>
     <p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="330"></p-confirmDialog>

<p-dataTable [value]="data" resizableColumns="true" selectionMode="single" (onRowSelect)="onRowSelect($event)">
  <p-column field="status" header="Name" [sortable]="true"></p-column>
  <p-column field="name" header="Email" [sortable]="true"></p-column>
</p-dataTable>

Upvotes: 2

Related Questions