Components: Snackbar appears towards top of window

Created on 10 Feb 2018 · 18Comments · Source: angular/components

Bug, feature request, or proposal:

Bug, hopefully not a duplicate.

What is the expected behavior?

Snackbar appears at bottom of browser window

What is the current behavior?

Snackbar appears towards top of browser window

What are the steps to reproduce?

Using an external library (Aspera), a success callback is fired upon file upload - which then triggers the snackbar, I am unsure of what would be causing this behavior

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.0.0, Material 2, Mac OS X (Sierra), Typescript, Chrome/Firefox/IE

Is there anything else we should know?

screen shot 2018-02-09 at 4 41 04 pm

Source

iamwhitebox

👍3

Most helpful comment

Got the same issue, but I used workaround with NgZone like here

Something like this

// Imports ommited

@Injectable()
export class AppService {
  constructor(private snackBar: MatSnackBar, private zone: NgZone) {}

  public openSnackBar(errorText: string): void {
    this.zone.run(() => {
      const snackBar = this.snackBar.open(errorText, 'OK', {
        verticalPosition: 'bottom',
        horizontalPosition: 'center',
      });
      snackBar.onAction().subscribe(() => {
        snackBar.dismiss();
      })
    });
  }
}

Charius on 23 Mar 2018

🎉17 👍12

All 18 comments

It seems to be something with your project setup. Could you reproduce it in stackblitz?

julianobrasil on 10 Feb 2018

@julianobrasil unfortunately there are too many external components to reproduce in a stackblitz, - another strange thing I noticed, is if the user interacts with any other part of the page , the snackbar will return to the bottom

iamwhitebox on 10 Feb 2018

Hum.... Maybe any third party library is messing with snackbar init? Why it would be fixed after interaction? Change detection round?

julianobrasil on 10 Feb 2018

@julianobrasil Good question, I tried doing a cdr.detectChanges()... I will provide update shortly!

iamwhitebox on 10 Feb 2018

I had the same thing in a Meteor application. This happens if you are outside of the angular-zone, for example in a callback of an external framework (callback of google-map or meteor.call). You can try a detectChanges with ChangeDetectorRef.

gjr-qm on 10 Feb 2018

If this is a running-out-of-zone issue, you should take a look at #9676 (read it from the begining to the conclusion comment)

julianobrasil on 10 Feb 2018

👍1

We'd love to help but without a reproduction case we will be unable to investigate. Please re-open with an example we can look at

andrewseguin on 14 Feb 2018

The same issue has been experienced by us.

Here's a snapshot:
snackbarr

At times, there's just the snackbar at the top and at times it's in both the places. And yes, if the user interacts with any other part of the page, the top snackbar does disappear and the bottom one shows up (if not already visible). In our case, although, the snackbar at the top is empty.

Having studied its DOM structure, we see noticed that:
A typical snackbar is rendered in the following way in the DOM:

<div class="cdk-overlay-container ...>
    <div class="cdk-global-overlay-wrapper ...>
        <div id="cdk-overlay-* ...>
                <snack-bar-container...>
                        ...
                </snack-bar-container>
        </div>
    </div>
</div>

But the the mis-positioned snackbar is not encapsulated within <div class="cdk-global-overlay-wrapper ...> , hence resulting into this behavior.

sagarvasnani on 26 Feb 2018

👍3

I confirm having the same issue in v5.2.4

mo2menelzeiny on 23 Mar 2018

Got the same issue, but I used workaround with NgZone like here

Something like this

// Imports ommited

@Injectable()
export class AppService {
  constructor(private snackBar: MatSnackBar, private zone: NgZone) {}

  public openSnackBar(errorText: string): void {
    this.zone.run(() => {
      const snackBar = this.snackBar.open(errorText, 'OK', {
        verticalPosition: 'bottom',
        horizontalPosition: 'center',
      });
      snackBar.onAction().subscribe(() => {
        snackBar.dismiss();
      })
    });
  }
}

Charius on 23 Mar 2018

🎉17 👍12

@Charius, that workaround helped!

sagarvasnani on 23 Mar 2018

@andrewseguin You should leave that issue open to help people find it. I had the same issue as soon as I initialized my app module like this

@NgModule(moduleDefinition)
export class AppModule {
    constructor(logService: LogService, snackBar: MatSnackBar) {
        logService.addLogHandler(new LogSnackHandler(snackBar));
    }
}

konsultaner on 26 Mar 2018

@konsultaner Unfortunately our Github issue tracker is our primary way of seeing which issues need to be resolved. Since there is no action we can perform to resolve this, it needs to remain closed.

If you can provide a stackblitz with reproduction, we can work off that

andrewseguin on 27 Mar 2018

@andrewseguin I solved the issue. I was using an external lib that uses when.js that feeds an observable. The problem was that I believed angular would fire a changeCheck if I use Observables by default, but it doesn't. This was the same issue as: https://github.com/angular/material2/issues/10587

konsultaner on 28 Mar 2018

I had this issue while implementing this with ErrorHandler. After some research Implementing setTimeout Resolve this issue for me.

  handleError(error) {
    this.ngZone.run(() => {
      setTimeout(() => {
        this.snackBar.open(error, 'ok', {
          duration: 5000,
          verticalPosition: 'top',
          horizontalPosition: 'right'
        });
      }, 0);
    });
  }