MdSnackBar: alignment & position

[da45]

proposal:

I hope this proposal is respecting the following spec
https://material.io/guidelines/components/snackbars-toasts.html

Snackbars are often used to show a message at the bottom of the screen, but, is there a possibility to config the position: horizontal, vertical, center, bottom, up, left, right ... etc,

What is the expected behavior?

user can choose the position and orientation,

What is the current behavior?

Snackbars is at the bottom of the screen

[donroyco]

A good reference for this improvement is the current toast demo page in the Material library (1.1.3).

[da45]

@donroyco yes this really awesome.
it will be great also to have a vertical option like the below picture :)

[MikeMatusz]

Continuing discussion from #115 here. On tablet/desktop the material spec does allow for some variation in position:

Alignment: Centered or left-aligned 24dp from the left and bottom edges of the screen

It would be nice to at least support the bottom/left alignment.

[xtianus79]

What is the final verdict on this?

[merobal]

Is there any update on this? PR #4045 is open and the latest update was done 12 days ago.

[rsxdalv]

I had an issue with positioning the snack bars, so I'll leave this for reference:

1. Do not try to change viewControllerRef, it won't position the element differently.
2. You can adjust the theme by adding rules after its imports (or at runtime) thus, you can position them
   using css.
3. If all you want is expectable behaviour on iOS Safari/similar where 100vh includes navigation elements that are not actually visible, use:
   /* Fixes height problem on snack bars for iOS */
   .cdk-global-overlay-wrapper, .cdk-overlay-container {
   height:100%;
   }
   Prerequisite: html and body are 100% or another set height (100% for entire viewport "fullscreen minus navigation")

[gil-msbitsoftware]

@rsxdalv thanks for sharing your solution.
I'm just trying to change snackbar's behavior to appear from top of screen.

can you please elaborate on the 2nd. section?