bug/feature(sidenav) limited customization caused by 'mat-drawer-inner-container' element

[IlCallo]

Bug, feature request, or proposal:

Bug or feature request

What is the expected behavior?

Sidenav to be fully customizable as it was before

What is the current behavior?

Having inserted a not-stylable container div between mat-drawer and the actual content, I cannot manage height and scrolling as before.

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

For example, in my case I have a 'collapser' button inside sidenav (toggle between normal and drawer mini mode) which must stick to the top while allowing other options to scroll.

<sidenav-container>
  <sidenav>
    <collapser></collapser>
    <links-container perfectScrollbar>
      <link></link>
    </links-container>
  </sidenav>
  <sidenav-content> ... </sidenav-content>
</sidenav-container>

This worked well without the intermediate div, because I could use display: flex to manage the height and scrolling making the links-container to take all available height minus that taken by the collapser element.

.mat-sidenav {
  display: flex;
  flex-direction: column;
}

Now I can't do it anymore and I'm forced to use global CSS to put the very same rules on the mat-drawer-inner-container, because I cannot style it from inside the component because of CSS scoping.

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

Angular 7 Material 7

Is there anything else we should know?

The added element is documented here

https://github.com/angular/material2/blob/76044e8b5c3a6342b05d2e89dfb3b4ccf308c422/src/lib/sidenav/drawer.scss#L162-L167

[crisbeto]

If we were to remove the extra element, we'd re-introduce the issue it was fixing in RTL layouts.

[IlCallo]

Of course. I was just noting that this fix removes some freedom degrees in sidenav design. And while you can overcome the issue with RTL layouts manually adding the inner div, you can't re-gain the flexibility of the component if that div is there and not stylable (let apart using global CSS rules, which definitely aren't a good practice),

Possible paths for resolution of this issue:

• manage the RTL bug using JS instead of adding an HTML element and revert previous solution
• find another HTML+CSS way to address RTL bug and revert previous solution
• allow in some way mat-drawer-inner-container styling (don't really know how, given CSS scoping)

[Busata]

After searching for a while what changed, found that this change is also the culprit for design issues we have. I'll probably find a way around it, but might save other people time to mention this in the changelog.

[nreynis]

I don't understand how do you even make "not-stylable" elements ?

[IlCallo]

I don't understand how do you even make "not-stylable" elements ?

I guess I'll quote myself...

Now I can't do it anymore and I'm forced to use global CSS to put the very same rules on the mat-drawer-inner-container, because I cannot style it from inside the component because of CSS scoping.

It's obviously possible to style it, if you accept to have a more difficult code both to understand and maintain, which I'd rather prefer not to

[pradeepbetty]

I don't understand how do you even make "not-stylable" elements?

you can style it.

.mat-drawer-inner-container {
        display: flex;
        flex-direction: column;
      }

[kushwahashiv]

I don't understand how do you even make "not-stylable" elements?

you can style it.

.mat-drawer-inner-container {
       display: flex;
       flex-direction: column;
     }

this workaround does not work.

[despian]

This is also an issue for me after upgrading to Mat 7.

Previously I was using directives from @angular/flex-layout to style the sidenav content.

I resolved it by adding my own container inside the sidenav and adding directives and styling to that. This way you can still use directives and you can use locally scoped CSS rather than global.

@IlCallo maybe this solution would work for you too.

[thevirajshelke]

I actually wanted to customize the sidenav so I started inspecting and found the class mat-drawer-inner-container being applied to the sidenav. So I thought of putting this in my component CSS

But it doesn't work. I don't know the technical issue as to why we are not able to style it, but I need some kind of workaround this!

Can anyone help? The following is what I wanted!

.mat-drawer-inner-container {
  position: absolute;
  overflow: hidden !important;
}

[thevirajshelke]

Can anyone tell me how can I style mat-drawer-inner-container? Or override the CSS present there? I want to override the overflow: auto to overflow: hidden.

[seanRoo]

Put this in styles.css Not considered good practice, but does the job.

.mat-drawer-inner-container{ overflow: hidden !important; }

[thevirajshelke]

Put this in styles.css Not considered good practice, but does the job.

.mat-drawer-inner-container{ overflow: hidden !important; }

This worked for me! Thanks a lot :) Even though it's not a good practice like you said, I'll still have to use it till anything else comes up :) Thanks once again :+1:

[swamim]

This will pass the scroll into parent container. You add style in .sidenav .mat-drawer-inner-container{ overflow: unset !important; }

[liukun]

Add an extra layer works for me.

  <mat-sidenav>
    <div class="sidenav-full">
      content
    </div>
  </mat-sidenav>

Then style .sidenav-full .

[jumarjuaton]

Try this temporary solution. This worked for me:

::ng-deep .mat-drawer-inner-container {
     overflow: visible!important;
}

[RenatoValentim]

Tente esta solução temporária. Isso funcionou para mim:

::ng-deep .mat-drawer-inner-container {
     overflow: visible!important;
}

:: ng-deep was the way I found to change the material's native classes as well.

[vvolodin]

This is still unstylable on the component level. Please fix.

[nono1988]

Facing same issue. tried all above fixes but mat drawer is having style issues