feat(select): allow auto-width based on placeholder / value
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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

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

cc @crisbeto
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and inspect the mat-form-field and mat-select structure involved in the fixed-width and placeholder cases. Compare the current behavior with the requested auto-width behavior for both an empty placeholder and a selected value; done means the select can size fluidly without breaking the arrow or placeholder layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100