How can i align Snackbar?

Question

I created Snackbar using material 2(below i have added demo) .I have one button in main page when i click that button it showing message(snackbar) in bottom of the page . i want to change this(snackbar message) into top right corner of the page. how can i do this ?? need help

Demo

Html

<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

component.ts

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,

        });
  }
}

Solution 1

here is some updated CSS which will help you to show snack bar on the top left.

for more effect have a look here

https://stackblitz.com/edit/angular-mbgkfv-amqfpy?file=styles.css

here is your updated stackblitz which will reload the page after 5s.

https://stackblitz.com/edit/angular-mbgkfv-nc6bk6?file=app/snack-bar-component-example.ts

Solution 2

An alternative way to do it is by specifying the verticalPosition and horizontalPosition configuration options of MatSnackBarConfig, which is passed via the config argument in MatSnackBar#open.

Here's an example:

openSnackBar(message: string, action?: string) {
    this.snackbar.open(message, action ? action : undefined, {verticalPosition: 'top', horizontalPosition: 'end'});
}

From the docs, only two values for the verticalPosition are allowed: 'top' and 'bottom'.

For horizontalPosition, 'start', 'center', 'end', 'left' and 'right'.

Here's an updated demo

Solution 3

try this :

export class SnackBarComponentExample {

  constructor(public snackBar: MatSnackBar) {}

  openSnackBar(message="DOne", action = '') {
          this.snackBar.open(message, action, {
          duration: 5000,
          verticalPosition: 'top',
          horizontalPosition:'right',
        });
  }
} 

it worked for me .

Comments

[Brad Larson]

As a warning: spamming comments asking people to answer your question is an abuse of the comment facility. These comments have been removed. Please don't do this again.

[Hrishikesh Kale]

have a look here updated one stackblitz.com/edit/angular-mbgkfv-nc6bk6?file=app/…

[its me]

i want snackbar to open right top corner if i add that css dialog box also coming top right corner . stackblitz.com/edit/angular-z4tjwe-58bfsk?file=styles.css

[Shrey Kejriwal]

Not able to get your question

[its me]

i added rigt align css . when i click button snackbar coming top right corner but i have Dialog also on that same page. that dialog also coming top right..can you pls check the above link you came to know. my expectation dialog should come middle of the page snackbar should come top right corner of the page

[Hrishikesh Kale]

don't worry brother here is updated stack stackblitz.com/edit/angular-z4tjwe-mjhkep?file=app/…

[its me]

is it possible to change snackbar background color ??

[Hrishikesh Kale]

here is the updated code stackblitz.com/edit/angular-mbgkfv-vmmfvi?file=app/…

[its me]

Let us continue this discussion in chat.

[its me]

IS it possible to align popup Add and cancel button right(align) side of the dialogue .stackblitz.com/edit/angular-z4tjwe-ddj2aw?file=app/…

[Edric]

@itsme Don't use hacky CSS, just specify it with the verticalPosition and horizontalPosition properties of MatSnackBarConfig

[Edric]

Nope. Don't use hacky CSS. You can do it programmatically.