Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(MatSnackBar): Long message leads to action button getting detached from snackbar #21681

Closed
rhofour opened this issue Jan 23, 2021 · 1 comment · Fixed by #24135
Closed

bug(MatSnackBar): Long message leads to action button getting detached from snackbar #21681

rhofour opened this issue Jan 23, 2021 · 1 comment · Fixed by #24135
Assignees
@crisbeto
Labels
area: material/snack-bar P4 A relatively minor issue that is not relevant to core functions

Comments

@rhofour
Copy link

rhofour commented Jan 23, 2021

Reproduction

Screenshot: https://i.imgur.com/YZnHIiR.jpg

Steps to reproduce:

  1. https://material.angular.io/components/snack-bar/overview
  2. Type a long message into the message field
  3. Hit show snack-bar

Expected Behavior

What behavior were you expecting to see?
Message would overflow or wrap, but with the button still as part of the snack bar.

Actual Behavior

What behavior did you actually see?
The message is cut off, but then there's significant blank space before the button shows.
It's easy to miss the button here since it's separate from the background.

Environment

  • Angular: 11
  • CDK/Material: 11.1.0
  • Browser(s): Chrome 87
  • Operating System (e.g. Windows, macOS, Ubuntu): Fedora
@rhofour rhofour added the needs triage This issue needs to be triaged by the team label Jan 23, 2021
@crisbeto crisbeto added area: material/snack-bar P4 A relatively minor issue that is not relevant to core functions and removed needs triage This issue needs to be triaged by the team labels Jan 25, 2021
@crisbeto crisbeto self-assigned this Dec 27, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 27, 2021
@crisbeto
fix(material/snack-bar): handle long single-line content
1965d65 
Fixes that long strings without spaces were breaking the layout of the snack bar.

Fixes angular#21681.
@crisbeto crisbeto mentioned this issue Dec 27, 2021
Merged
andrewseguin pushed a commit that referenced this issue Jan 13, 2022
@crisbeto
fix(material/snack-bar): handle long single-line content (#24135)
0bc45ca 
Fixes that long strings without spaces were breaking the layout of the snack bar.

Fixes #21681.
andrewseguin pushed a commit that referenced this issue Jan 13, 2022
@crisbeto @andrewseguin
fix(material/snack-bar): handle long single-line content (#24135)
99e7782 
Fixes that long strings without spaces were breaking the layout of the snack bar.

Fixes #21681.

(cherry picked from commit 0bc45ca)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 13, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/snack-bar): handle long single-line content (angular#24135)
3fe7b95 
Fixes that long strings without spaces were breaking the layout of the snack bar.

Fixes angular#21681.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/snack-bar P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/snack-bar): handle long single-line content crisbeto/material2
2 participants
@rhofour @crisbeto