Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Absolute bottom snackbar is placed on bottom of container instead of viewport

See original GitHub issue

I don’t know if this counts as a bug or intentional. If not, a feature like this would be nice.

Steps to reproduce

Use the predefined layout.
Add an absolute bottom left snackbar inside a v-container. v-container needs to have position: relative style.
Add content to v-container long enough to make it scrollable.
Show the snackbar.

Versions

0.15.7

What is expected ?

The snackbar is shown on viewport.

What is actually happening ?

The snackbar can only be seen if you scroll to the bottom of the container.

Reproduction Link

https://codepen.io/dEradicated/pen/oGXKvj

Issue Analytics

State:
Created 6 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

nekosaurcommented, Sep 17, 2017

The placement follows CSS rules, and like @smares said should be intuitive. I’m not sure I understand what you expect to happen? If you want it show in the bottom left of the page simply remove the position: relative, or the absolute prop from the snackbar

0reactions

lock[bot]commented, Apr 15, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

Top Results From Across the Web

How to align Vuetify snackbar component vertically to the ...

Having that centered property only aligns it horizontally, but not vertically, that is, I stay in the center, but at the bottom of...

Snackbars - Material Design

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen....

SnackBar class - material library - Flutter - Dart API docs

A lightweight message with an optional action which briefly displays at the bottom of the screen.

v-snackbar API - Vuetify

name type default #absolute boolean false #app boolean false #bottom boolean false

Example of React Native Floating Action Button - About React

Elements are then positioned using the top, bottom, left, and right properties. ... ancestor (instead of position relative to the viewport, like fixed)....