I’m trying to create a snackbar that would adapt to content but it prefers to expand vertically instead of horizontally. As you can see in the snippet, there is plenty of space on the left and right side of the snackbar, yet it doesn’t uses it and instead breaks the text into 4 or more lines.
I have seen similar questions but they don’t solve my problem. I don’t want to
- Specify minimum width
- create scrolling containers
- specify maximum height
I want the snackbar to be as small as possible but prefer to expand horizontally upto 90% of the window and then as much as it needs to vertically.
I can’t find a way to set this “preference” as opposed to specifying hard limits.
body {
background: #333;
}
.snackbar{
position: fixed;
left: 50%;
transform-origin: bottom;
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border-radius: 2rem;
bottom: 3rem;
max-width: 90%;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: var(--neutral-color-1);
box-shadow: var(--shadow-4dp);
z-index: 21;
transition: transform 0.1s linear, opacity 0.05s ease-out;
transform: translate(-50%) scaleY(1);
opacity: 1;
}
.snackbar > .action {
text-align: center;
white-space: nowrap;
margin: -0.75rem -0.5rem -0.75rem 0.75rem;
}
.snackbar.two{
bottom: 10rem;
}<div class="snackbar"><div>I'm a snackbar with action</div><div class="action"><button type="button" class="btn text">Undo</button><button type="button" class="btn icon"><span class="material-icons">close</span></button></div></div>
<div class="snackbar two"><div>I'm a snackbar</div></div>