question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat(SELECT): Allow dropdown to be wider than parent form-field like before v15

See original GitHub issue

Feature 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:open
  • Created 10 months ago
  • Reactions:4
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
stnorcommented, Dec 2, 2022

One simple use case: selected value is a flag icon, items are flag + language in text.

1reaction
mmalerbacommented, Dec 7, 2022

I’m saying its something we should support in the future.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found