Angular Material Tabs with side Navigation does not work

1
votes

Angular Material on the content messes up the side bar navigation in Angular Material. When we open the side navigation, the tab content shows up on the side navigation as though the side nav is transparent. 

<mat-tab-group>
        <mat-tab label="Applicant Details">

I was checking for different CSS options around the position, but no luck so far. If I remove the tab group, the application looks okay.

1
angularangular-material
If the sidebar navigation hidden or fixed to the side? – Reactgular
I am not sure what the actual problem is since I do not have a StackBlitz-example to check the issue out. However: here I have made a StackBlitz-example with a side-navigation where the side-drawer includes a tab-navigation: stackblitz.com/edit/angular-dwu14k . Does that help? If not: could you modify it to show the issue? – Igor
Thank you I will create one, I am having mat-tab in the body and when the side nav pops, both the content are kind of mixed up. I will share the stackblitz – vinSan

1 Answers

0
votes

Had this same issue, just forcing z-index to 0 was not working in scss, it kept getting overridden somewhere, so the only thing that worked for me was using jquery to force the z-index value in onNgInit().

ngOnInit() {
    $('.mat-tab-header').css("z-index", 0);
    $('.mat-tab-body-wrapper').css("z-index", 0);
  }