help(Snackbar): Change z-index of snackbar without affecting Dialogs

[FacuDN]

Hi, I need to change the z-index of the snackbar but im not able to do it.

I found that if I have the following class in styles.scss, I can indeed change the z-index but it also affects the Material Dialogs.

.cdk-overlay-container { z-index: 99999999999999; }

Any way I can only affect the Snackbars?

Thanks in advanced!

[crisbeto]

You can pass a panelClass to the snack bar config and only target that class with your z-index.

[FacuDN]

You can pass a panelClass to the snack bar config and only target that class with your z-index.

I have already tried that, but the z-index affects the content of the snackbar, not the container

css .success-snackbar { background-color: $success-color !important; color: $white-color !important; z-index: 999 }

And in ts let config = new MatSnackBarConfig(); config.panelClass = ["success-snackbar"];

[crisbeto]

I see. Usually when we have a panelClass option it sets the class on the overlay wrapper, but for some reason the one of the snack bar sets it on the container.

[giahieu123456]

i have same problem

[dev054]

I'm facing the same problem with MatDialog and MatSelect. I want to reduce the z-index of MatDialog but keep the MatSelect one intact. Is that possible, even with a workaround? I'm stucked at this for a long :cry:

[konstantinosftw]

I am dealing with the same issue. MatDialog has a backdropClass property that allow us to fiddle with the outer elements. But Snackbar doesn't.

[anthonyjuarezsolis]

Has anyone already found a solution to this?!

[quanghienle]

I found a workaround by using CSS's :has

.cdk-global-overlay-wrapper:has(> .cdk-overlay-pane > mat-snack-bar-container) {
  z-index: 1200;
}