feat(SELECT): Allow dropdown to be wider than parent form-field like before v15
See original GitHub issueFeature Description
Since v15, mat-select dropdown menu width stick strictly to the mat-select itself (cf. https://material.angular.io/guide/mdc-migration#select). But IMO, this is a terrible behavior because it may decrease usability on small devices or, more generally, in any place you need to have a small select (like a select inside a search field, exemple : https://www.amazon.com/). It may force devs to switch to a mat-menu alternative which is not built to work with form controls
Use Case
What was done in previous versions of Angular Material was great and solve issues exposed above
Issue Analytics
- State:
- Created 10 months ago
- Reactions:4
- Comments:12 (5 by maintainers)
Top Results From Across the Web
Set width of dropdown element in HTML select dropdown ...
I find the best way to handle long dropdown boxes is to put it inside a fixed width div container and use width:auto...
Read more >dropdowns not going outside of bounding containers #404
It seems that dropdowns seem to render only within the parent container that the select is in, instead of being on top of...
Read more >Dropdown - Semantic UI
A selection dropdown can allow a user to search through a large list of choices. Select Country.
Read more >Dropdowns - Bootstrap
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown ...
Read more >DropdownButton (Widget of the Week) - YouTube
... to select a value from a list of options? There's a widget for that. Add an easy to use dropdown menu to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

One simple use case: selected value is a flag icon, items are flag + language in text.
I’m saying its something we should support in the future.