angular / angular/components

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

Open
#22,000 9 comments 1 reaction 0 assignees View on GitHub
area: material/snack-bar P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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!

Contributor guide

Open the contributing guide

Research direction

Start with the styles.scss example and reproduce the z-index change on a Snackbar alongside a Material Dialog. Trace how the shared cdk-overlay-container affects both components and identify the existing Snackbar-specific entry point, if one is exposed. Done means the Snackbar stacking order can be changed without changing the Dialogs.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.