CODEWITHSUNDEEP
cssangulardialogprimengconfirm-dialog
jason316
jason316

Reputation: 88

Angular 6 Primeng confirmdialog inside of dialog deactivates page

I am trying to add a confirm dialog into a dialog box that is in a component on my navbar.

  <p-menubar>
      <div>
          <app-overlay></app-overlay>
      </div>
  </p-menubar>

this component has an overlay Panel that opens a dialog box. On the page that it is opening from also has a confirm dialog inside of it that is used for other reasons. Whenever the overlay panel confirm dialog is opened, it opens the other graying out the screen and freezing the screen. I have used the z index to bring the dialog forward but the background is still disabled after closing the dialog box. I have also tried [appendTo]="body". If I remove the confirmdialog on the back page then it behaves as normal. So, I know it has something to do with having two, one opening the other.

Inside component that also has a confirmdialog box that opens when this is activated:

<p-dialog>
    <p-confirmDialog [appendTo]="body"></p-confirmDialog>
    <p-messages [(value)]="errors"></p-messages>
    <div>
    </div>
    <p-footer>
    </p-footer>
</p-dialog>

Some css:

.ui-confirmdialog {
     z-index: 100000 !important;
}

Nothing I tried has worked, so far any help would be appreciated.

Upvotes: 0

Views: 3268

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86730

Instead, Better to use same css in your global css (Style.css of root level) 

body .ui-confirmdialog {
     z-index: 1001 !important;
}

But if you want to use css in your component level then you must need ng-deep as below - 

:host ::ng-deep .ui-confirmdialog {
    z-index: 1001 !important;
}

PS: BTW it is not good to use so big property(as 100000 ) to z-index. (As per comment section)

Upvotes: 1

Marshal
Marshal

Reputation: 11081

Try adding the below to your component style sheet

::ng-deep .ui-confirmdialog {
  z-index:100000 !important
}

Without ::ng-deep it would need to go into your global style sheet.

Please reference the answer on this SO question for why using ::ng-deep is ok until further notice.

What to use in place of ::ng-deep

Upvotes: 2

Related Questions