Sidenav always visible when nested elements use fullscreen.

[Enngage]

Bug/proposal

Hey guys,

I'm using the sidenav component which puts all content inside 'mat-sidenav-content' that contains sets z-index: 1;. This is causing an issue any nested components require fullscreen because the side navigation is always visible no matter what z-index I use. I expect this to be because the mat-sidenav-content has a priority over the child elements.

It ends up looking like this:

What is the expected behavior?

I would like the ability for nested components to use fullscreen without manually hiding the sidenav.

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

Using Angular material 2.0.0-beta.12 & Angular 4.4.4.

Is there anything else we should know?

It seems that setting z-index to -2 to .mat-drawer-content or .mat-drawer.mat-drawer-side classes fixes the issue, but I'm unsure as to any other side effects this might have. I have not seen any though.

After this change it looks as I would expect it to:

[Enngage]

I'm no front-end developer, but overriding these classes did the trick for me:

.mat-drawer.mat-drawer-side {
    z-index: 1!important;
}

.mat-drawer-content {
    z-index: auto!important;
}

.mat-drawer-container {
    z-index: auto!important;
}

So far it seems ok and I found no issues with this so far.

Tested on "@angular/material": "5.0.0-rc0"

[mmalerba]

We introduced z-index as a way of creating a new stacking context since transform: translate3d(0,0,0) caused fixed position elements to behave like absolute ones. We can revisit and see if there's something else we can do, but for now overriding the z-index is the appropriate workaround.

[bvspkk]

Hai , I am using as per above style sheet backdrop not appear to main component sidenav . Please help