angular / angular/components

bug(sidenav): Auto-resizing is broken.

Open
#31,641 2 comments 1 reaction 0 assignees View on GitHub
area: material/sidenav P2 regression
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

v16

### Description

Auto-resizing has been broken since Angular Material v17 due to the `container-width` styling.

`MatDrawerContainer#updateContentMargins()` checks the width of MatDrawer.
https://github.com/angular/components/blob/11f9228e1b4c18c86bb3de43d02fe40a39fcfff7/src/material/sidenav/drawer.ts#L897-L941
However, the MatDrawer's width is fixed due to `container-width` styling.
As a result, the content margins always end up being the same value.

I guess adding `width:auto` to the host style of `MatDrawer` when `autosize` is specified could restore the behavior.

For example:
`'[style.width]': '(!_container && _container.autosize) ? "auto" : null',` on
https://github.com/angular/components/blob/11f9228e1b4c18c86bb3de43d02fe40a39fcfff7/src/material/sidenav/drawer.ts#L157-L172

### Reproduction

Reproduced the Angular Material docs example:
- [v17](https://v17.material.angular.dev/components/sidenav/examples#sidenav-autosize)
- [v18](https://v18.material.angular.dev/components/sidenav/examples#sidenav-autosize)
- [v19](https://v19.material.angular.dev/components/sidenav/examples#sidenav-autosize)
- [v20](https://v20.material.angular.dev/components/sidenav/examples#sidenav-autosize)

It still works on v16:
- [v16](https://v16.material.angular.dev/components/sidenav/examples#sidenav-autosize)

### Expected Behavior

Auto-resizing should work.

### Actual Behavior

Auto-resizing is not work.

### Environment

- Angular: v17~v20
- CDK/Material: v17~v20
- Browser(s): Chrome 138.0.7204.169
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start in src/material/sidenav/drawer.ts, especially MatDrawerContainer#updateContentMargins() and the MatDrawer host styling around the referenced lines. Reproduce the sidenav-autosize example across the linked Angular Material versions and compare the drawer width used for content margins. Done means autosizing changes the content margins as the drawer width changes, as it does in v16.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.