Open Enngage opened 7 years ago
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"
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.
Hai , I am using as per above style sheet backdrop not appear to main component sidenav . Please help
Bug/proposal
Hey guys,
I'm using the sidenav component which puts all content inside
'mat-sidenav-content'
that contains setsz-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 themat-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: