Components: 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?

[rsxdalv]

@gil-msbitsoftware You can use negative margins or any layout on them, though relative layout would have to be dynamically calculated within JavaScript.
Then, all that's left is to emit that style. One way of doing that is having a component without view encapsulation (say one that is added to your target component that you are keeping pristine). Then, while this component exists (Control it with *ngIf for example), you have a modified positioning.

Read the section on inlining if you want to modify global style with components: https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

However, this approach is pretty ugly - unless you are sure about how to encapsulate the css and manage its lifecycle (egg, if you want to dynamically reposition the elements.) I'd suggest only using it if you have screens that need it in different positions and those positions are screen, not content relative (so you can use viewport percentages).

I'm hopefully not going to need to use it past the bugfix, in which case I'm just using a global override in the styles.css.

[webcat12345]

If we can adjust snackbar position through config, that would be great.

[webcat12345]

When this feature could be released? Is there any desired schedule for this? I am using snackbar and needs to move this bar to the right top, but can not find way to solve this.

Is there any special solution to fix this right now?

[xtianus79]

@webcat12345 no you are going to have to wait... but yes this build is taking a long while. If you want what is in master now you can download the master version instead of the official version

[erangeles]

does anyone has a workaround for positioning the snackbar on top?

[Goodwine]

You could pass in extra CSS values via MdSnackbarConfig, but keep in mind that the animation plays assuming the snackbar pops up from the bottom.

[xtianus79]

@erangeles @Goodwine yes that is why we are waiting so very patiently for this to be released. lol.... I tried to hack it but it just isn't worth it. I will continue waiting.

[Mohitsirf]

can anyone give me example to change the position and applying css on snackbar

[xtianus79]

@Mohitsirf no don't do it. it's not worth it. Unfortunatly we will have to wait longer.

[yeneek]

There is my sample workaround.

import {Injectable} from '@angular/core';
import {MdSnackBar} from "@angular/material";

@Injectable()
export class MalfunctionService {
  constructor(private snack: MdSnackBar) {
  }

  showError(errorMessage: string) {
    this.snack.open(errorMessage, 'close', {
      extraClasses: ['error-message', 'mdl-shadow--6dp', 'bold']
    }).afterOpened().first().subscribe(this.setOnTop);
  }

  setOnTop = () => {
    let elements = document.getElementsByClassName('cdk-global-overlay-wrapper');
    let length = elements.length;
    for (let i = 0; i < length; i++) {
      elements[i].setAttribute('style', 'justify-content: center;align-items: flex-start;');
    }
  }
}

[josephperrott]

Closing as #4045 has merged

[ORESoftware]

please god

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 4000,
      location: 'top'        // <<<<
    });
   }

[Goodwine]

@ORESoftware What? The right way to do this is:

openSnackBar(message: string, action: string) {
  this.snackBar.open(message, action, {
    duration: 4000,
    verticalPosition: 'top',
    horizontalPosition: 'end',
  });
}

Please read the API if you have any other questions
https://material.angular.io/components/snack-bar/api

[thw0rted]

The alignment is still wrong. The example in the docs creates a snackbar that touches the bottom of the viewport -- for some reason, .mat-snack-bar-center sets the container margin to 0, overriding the (correct) value of 24px on .mat-snack-bar-container. Should I open a new issue to correct this? I'm manually overriding the style for now.

[donroyco]

@thw0rted I think it's better to open a new issue, since this one has been closed

[angular-automatic-lock-bot[bot]]

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