3

My app uses multiple mat-dialogs and sometimes it can happen that 2 are displayed at same time which causes a problem as the second one is never displayed correct and since its modal renders the app useless. After some more research it seems i can adjust the z-index for the mat-dialog via

.cdk-overlay-container {
z-index: 500 !important;

}

But that wont solve my problem as it will change the z-index for all to 500. My question is how can i change the Z-index only for certain mat-dialogs. For example all my basic dialogs can be one z-index as they will never show at same time and then i have dialogs which will alert or warn users which have to go above these basic ones. What is the best way to make it somewhat user configurable ?

kian
  • 1,449
  • 2
  • 13
  • 21
NoSoup4you
  • 640
  • 1
  • 10
  • 34
  • Maybe using a dialog is not the right solution for your case. Consider something else? Sounds like you're trying to make a sausage be a chicken, which it is not. The dialog that is instatiated last, is supposed to be on top and that's how dialogs work. – funkizer Sep 24 '21 at 16:46
  • 1
    Dialogs are bad to use and I try not to use them at all. With no dialogs, the website is much easier to test and more mobile-friendly. So my website would rarely have 1 dialog visible and never 2 dialogs visible, you should consider a different path. – tfa Sep 24 '21 at 16:55
  • Where does it say that you can not have multiple mat-dialog's on a page ? If that's the case please show me. – NoSoup4you Sep 24 '21 at 16:55

1 Answers1

3

When opening dialog you can provide MatDialogConfig into open method. One property of config is panelClass. So in your global styles you can have a class that will change the z-index, only if the class is applied to the modal via config.

styles.css

.warning-dialog {
    z-index: 500 !important;
}

and then when opening the dialog you can pass class name in the config:

this.dialog.open(
    YourComponent,
    {
        panelClass: 'warning-dialog'
    }
);

Also consider removing !important from your styles, it usually creates problems in the future with maintainability of styles.

mimo
  • 6,221
  • 7
  • 42
  • 50
  • 3
    This solution is not working. I have the same issue, I work with @angular/cdk/dialog, but it is the same as Mat Dialog. Changing `panelClass` will add additional class to the the `cdk-overlay-pane`. `z-index` must be changed on the parent `cdk-overlay-container` element for this to work. – Vladimir Prudnikov Aug 27 '22 at 20:45