CODEWITHSUNDEEP
cssangularsassangular-material
tilly
tilly

Reputation: 2610

Angular material: snackbar is hidden behind component with high z-index

So I'm playing around with Angular a bit and I wanted to add material snackbar to my app for when there's an error in my app.

So, I have my hompage and my navigation is an overlay with a z-index of 3000. In the navigation there's the option to log in ( see picture below ). I entered bad log in data on purpose to trigger the error handler and make the snackbar appear.

The snackbar does appear. However, it is hidden behind the navigation. How can I make it show above the navigation? I tried adding a z-index of 10000 to the scss of the component that handles the snackbar with the following code:

* {
z-index: 10000;
}

and 

::root {
z-index: 10000;
}

But none worked. Does anyone know how to do this?

App.component.ts: user-navigation is where I handle the log in. Notifications contains the logic for the snackbar

<navigation></navigation>
<user-navigation>

</user-navigation>
<router-outlet></router-outlet>
<notifications></notifications>

Notifications.component.ts , this works, it opens the snackbar, but it is hidden behind the user navigation

import { Component, OnInit } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import {NotificationService} from '../services/notification.service';

@Component({
  selector: 'notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {

  constructor(public snackBar: MatSnackBar, private notificationService: NotificationService) { }

  ngOnInit() {
    this.notificationService.notification$
        .subscribe((message) => {
          console.log('received the notification', message);
          this.openSnackBar(message);
        });
  }

  openSnackBar(message: string, action?: string) {
    setTimeout(() => {
      this.snackBar.open(message, action, {
        duration: 20000
      });
    }, 0);
  }
}

This is the login page. The home page is behind this and not visible because of the high z-index I gave to the navigation

enter image description here

This is the homepage when I close the navigation. The snackbar is visible, but I want to be able to also see it with the navigation open

enter image description here

Upvotes: 9

Views: 12182

Answers (8)

Sujeewa K. Abeysinghe
Sujeewa K. Abeysinghe

Reputation: 347

.cdk-overlay-container { z-index: 100000; }

For Any Angular Version | you can use this, btw you can increase the size until it gets appeared on top of every elements(I mean your components).

Upvotes: 0

Rochadsouza
Rochadsouza

Reputation: 978

I have a problem because while using MatSnackBar and MatDialog since MatSnackBar was always overlaid by dialog. With this solution, I got MatSnackBar with a higher z-index: https://github.com/angular/components/issues/7471#issuecomment-340856500

Upvotes: 0

Daniel Tseng
Daniel Tseng

Reputation: 51

(Angular 9) I add the following css code to fix it.

styles.scss

.cdk-overlay-container {
    z-index: 99999999999999; 
}

Upvotes: 5

MSXman
MSXman

Reputation: 131

(Angular 8) Putting this on style.css worked fine for me:

.cdk-overlay-container {
    position: fixed;
    z-index: 10000;
}

Upvotes: 13

Marcus
Marcus

Reputation: 82

I had the same issue. I decided to reduce the z-index of the footer element instead of increase the snack one.

Regards M

Upvotes: 1

Dima Shivrin
Dima Shivrin

Reputation: 99

Try to put this in your base/root css file, if you don't have one, try adding tags in your index.html file and add this css over there. 

 :host /deep/ .cdk-overlay-pane{
   z-index: 1000;
 }

Upvotes: 0

dK-
dK-

Reputation: 602

can't you just put the <notifications> element on top?

<notifications></notifications>
<navigation></navigation>
<user-navigation></user-navigation>
<router-outlet></router-outlet>

Upvotes: 0

Krishna Rathore
Krishna Rathore

Reputation: 9687

you can try with override this css class

style.css/style.scss

.cdk-overlay-pane{
  z-index: 10000 !important;
}

Upvotes: 4

Related Questions