Components: MdSnackbar blocks actions from a page instead of pushing the contents up

Created on 10 Jun 2017  路  7Comments  路  Source: angular/components

Bug, feature request, or proposal:

From the material guidelines, in mobile, the snackbar should push the contents up in order to not block actions on the page.

What is the expected behavior?

Contents should be "pushed up" like the Material guidelines video.
https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B6Okdz75tqQsZV9TS3lTVHFzRUE/components_snackbar_usage_fabdo_005.webm

What is the current behavior?

MdSnackbar is being rendered as an "overlay" on top of whatever including actions on the page.
https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B6Okdz75tqQsYkUtOWM5bmpYT2c/components_snackbar_usage_fabdont_005.webm

What are the steps to reproduce?

  1. Visit https://run.plnkr.co/plunks/mbRlieU09iC48gsdz1uU/
  2. Use dev tools to see the screen as if it was a Nexus 5X or Iphone 4
  3. Click the button to show the snackbar at the bottom of the page.
  4. Try to click the button again without dismissing the snackbar.

What is the use-case or motivation for changing an existing behavior?

We are showing a snackbar for first time visitors asking "what do you think of the site". This action is obviously not important for our users and therefore we shouldn't block the main actions in the UI, but with the current behavior, users are required to interact with the snackbar.

Most helpful comment

@willshowell good news! That is being tracked at #4252.

All 7 comments

You're interpreting this wrong:

From the material guidelines, in mobile, the snackbar should push the contents up in order to not block actions on the page.

It should only push _actions_ (like a 'add' button) up, when they are in the area where the snackbar will be shown. See the Material guidelines where this is being said:

Don鈥檛 block the floating action button
Move your floating action button vertically to accommodate the snackbar height.

It would be awesome if a FAB could be attached to a portal that provided "generic FAB positioning" where it would stick to the correct position and be pushed aside by snackbars.

@willshowell good news! That is being tracked at #4252.

@donroyco I disagree, in the example I'm sharing there is a button that is being hidden by the snackbar which shouldn't be hidden because it is an action.
I would agree however if the material spec said something less ambiguous like "actions that float on the screen" or "actions that have a sticky position at the bottom of the screen".

@Goodwine The snack-bar is intended as a _notification bar_ or _quick action bar_, not as a permanent overlay on top of your content, so in that way it is okay to be on top of your content for just a couple of seconds.

Snackbars provide brief feedback about an operation through a message at the bottom of the screen. They exit by being swiped off-screen or automatically disappear after a timeout or user interaction elsewhere (such as summoning a new surface or activity).
Source

I don't think the explanation above together with the setup of the snack-bar page can't get any clearer. Therefore, there's no need for an update on the specs, they're self explanatory.

The snackbar-pushes-FABs features is tracked by #4252.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

michaelb-01 picture michaelb-01  路  3Comments

theunreal picture theunreal  路  3Comments

xtianus79 picture xtianus79  路  3Comments

jelbourn picture jelbourn  路  3Comments

kara picture kara  路  3Comments