Snackbar appears towards top of window

[iamwhitebox]

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?

[julianobrasil]

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

[iamwhitebox]

@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

[julianobrasil]

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

[iamwhitebox]

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

[gjr-qm]

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.

[julianobrasil]

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)

[andrewseguin]

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

[sagarvasnani]

The same issue has been experienced by us.

Here's a snapshot:

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.

[mo2menelzeiny]

I confirm having the same issue in v5.2.4

[Charius]

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();
      })
    });
  }
}

[sagarvasnani]

@Charius, that workaround helped!

[konsultaner]

@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));
    }
}

[andrewseguin]

@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

[konsultaner]

@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: #10587