angular / angular/components

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

Open
#13,983 18 comments 17 reactions 0 assignees View on GitHub
area: material/sidenav P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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.

```html







...

```

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.

```scss
.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

Contributor guide

Open the contributing guide

Research direction

Start by reading the documented mat-drawer-inner-container rules in src/lib/sidenav/drawer.scss, then inspect how the intermediate container affects mat-sidenav layout and component-scoped styles. Done means the sidenav can support the collapser-and-scroll layout described in the issue without requiring global CSS; no test file is mentioned, so identify the relevant sidenav coverage before changing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.