-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Open
Labels
P4A relatively minor issue that is not relevant to core functionsA relatively minor issue that is not relevant to core functionsarea: material/snack-bar
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
When a snackbar displays a message that exceeds the height of the viewport, the message overflows and becomes unreadable.
I understand that snackbars are generally intended for short messages and that very long messages should ideally be avoided. However, in cases where this does happen, it would be helpful if the content remained at least partially readable, for example by making the snackbar scrollable or wrapping the content appropriately.
Currently, as a workaround, we are using the following CSS:
.mat-mdc-snack-bar-label {
max-height: 95dvh;
overflow: auto;
}
Reproduction
Steps to reproduce:
- Trigger a snackbar with a very long message (longer than the viewport height).
- Observe that the message overflows and cannot be read.
Expected Behavior
The snackbar should handle long messages gracefully, allowing the user to read the full content.
Actual Behavior
The snackbar overflows the viewport and the content is unreadable.
Environment
- Angular: 20.1.4
- CDK/Material: 20.1.4
- Browser(s): chrome 140.0.7339.208
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
Metadata
Metadata
Assignees
Labels
P4A relatively minor issue that is not relevant to core functionsA relatively minor issue that is not relevant to core functionsarea: material/snack-bar