angular / angular/components

bug(sidenav): Auto-resizing is broken.

Aperta
#31,641 2 commenti 1 reazione 0 assegnatari Vedi su GitHub
area: material/sidenav P2 regression
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.