angular / angular/components

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

Open
#7,627 12 comments 30 reactions 0 assignees View on GitHub
area: material/select feature P3
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

![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

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.