bug(sidenav): Auto-resizing is broken.
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia in src/material/sidenav/drawer.ts, in particolare in MatDrawerContainer#updateContentMargins() e nello stile dell’host di MatDrawer intorno alle righe indicate. Riproduci l’esempio sidenav-autosize nelle versioni collegate di Angular Material e confronta la larghezza del drawer utilizzata per i margini del contenuto. Il lavoro è completato quando l’autosizing modifica i margini del contenuto al variare della larghezza del drawer, come avviene in v16.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 52/100