angular / angular/components

feat(select): allow auto-width based on placeholder / value

Aperta
#7,627 12 commenti 30 reazioni 0 assegnatari Vedi su GitHub
area: material/select feature P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### fixed width on mat-form-field
I want my select to have the width of the selected item, fixed width on mat-form-field makes it impossible, you can override `.mat-form-field` to have `width` `auto`, along with overriding `.mat-select-value` to be `width` `auto` and `max-width` `100%`, but then you have a problem, because placeholder is absolutely positioned, which means that the select without any value set yet will be zero width (actually 18px because of the arrow).

https://stackblitz.com/edit/material2-select-width-issues?file=styles.scss

Now I could also override placeholders not to be absolutely positioned, but that's not gonna work properly either, because the arrow is inside the `md-select` element, while the placeholder is outside

![image](https://user-images.githubusercontent.com/1303561/31315390-330fa1e6-ac18-11e7-8b95-a19923299262.png)

I'm not sure if that 200px width is something that's on material spec, but the DOM could perhaps be structured a bit differently, in a way that wouldn't prevent devs from achieving fluid width (which is a bit closer to how native selects work)

## different height when selected vs. placeholder
![image](https://user-images.githubusercontent.com/1303561/31315458-4a4e4276-ac19-11e7-8d0d-98b9058da2c7.png)

cc @crisbeto

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Iniziare dalla riproduzione StackBlitz collegata e ispezionare la struttura di mat-form-field e mat-select coinvolta nei casi fixed-width e placeholder. Confrontare il comportamento attuale con il comportamento auto-width richiesto, sia per un placeholder vuoto sia per un valore selezionato; il lavoro è completato quando il select può dimensionarsi in modo fluido senza compromettere il layout della freccia o del placeholder.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
design, frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.