Components: [Sidenav] - Disabling backdrop / grey overlay

[RaviSankarRao]

Bug, feature request, or proposal:

Was trying to remove/disable the grey backdrop when the sidenav is displayed.
I don't see any properties to set them.
I tried the two solutions provided here - https://stackoverflow.com/questions/33333446/removing-the-grey-overlay-backdrop-from-mdsidenav
But they did not work.

Below is my plunker link
https://plnkr.co/edit/Zxup6owofUqA18tQ01Z5?p=preview

What is the expected behavior?

I am trying to add a sidenav in the right side of the page.
When the sidenave is opened, i need to push the content, so that user can still continue working in the main content. For this I do not want the grey backdrop. I tried but it is not working.

What is the current behavior?

The backdrop covers the main content thus disabling it for interaction and edits.

What are the steps to reproduce?

Provided in plunker link: https://plnkr.co/edit/Zxup6owofUqA18tQ01Z5?p=preview

What is the use-case or motivation for changing an existing behavior?

Trying few work around, but did not work. Is there a way to do so ?

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

All Latest

Is there anything else we should know?

NO

[willshowell]

Try this

https://plnkr.co/edit/uALEO3f6IrHm1gJosNnr?p=preview

[RaviSankarRao]

@willshowell It took some tome to realize the change you made in index.html

[dman777]

Just to confirm, there is no component attribute or api to set this? Using CSS as a last resort works but seems hacky.

UPDATE:

I actually could not get this to work from the plunker. Instead, I had to use ViewEncapsulation.None from https://stackoverflow.com/questions/45847994/angular-2-material-sidenav-how-to-remove-backdrop

[sanidz]

Hacky it is than, for angular material v5 its

.mat-drawer-backdrop.mat-drawer-shown {
      display:none;
}

[kuncevic]

This css did a trick for me:

::ng-deep .mat-drawer-backdrop.mat-drawer-shown {
  display: none;
}

UPDATE:
Or you can set [hasBackdrop]="false" on mat-sidenav-container

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}