带有侧面导航的“角度材质”选项卡不起作用

Question

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.

Answer 1

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