-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(SELECT): Allow dropdown to be wider than parent form-field like before v15 #26000
Comments
It's worth noting that previously the width was purely a side-effect of the design that required it to fit the selected option on top of the trigger. That being said, we should be able to provide a better way to control the panel's width. |
Thanks for the quick answer @crisbeto :) One more thing, this feature request could be applied to |
This change comes as a result of closer alignment with the material design spec, which shows select drop-downs always matching the width of their triggering form-field. The thinking behind the design appears to be that if your dropdown needs to be bigger, you should make the triggering form-field bigger. This makes sense because if you just adjust the size of your dropdown, it results in a select where the selected value can't easily be read when the dropdown is closed. Another data point for this is the native I'd be curious if there are example use cases you can provide where increasing the width of the select dropdown but not the trigger is desired. |
One simple use case: selected value is a flag icon, items are flag + language in text.
|
@mmalerba in fact I agree with your way of thinking but it’s very constrictive on mobile environment. The proper alternative is the mat-menu. But it requires more code and cannot be integrated with form controls out of the box. |
@sqljim Would you be able to share a stackblitz reproduction of that? I'm curious what's going on there because it looks like there's 2 dropdown arrows and the dropdown seems narrower than I would expect. I believe it should extend all the way to the edge of the filled box, which would give it the needed space: |
No, there's only one select. This field lives inside a div that is limited to 110px wide on mobile. but next to the select is an icon with an 'expand_more' and 'expand_less'. I hacked around it by removing the 16px of padding on the mat-mdc-option on @media max-width 600px. |
@sqljim I've created an example like you describe and the dropdown does extend to the edge of the filled box: https://stackblitz.com/edit/angular-nvgkbf-qpz9um, so I suspect there are some custom styles or something being applied in your version. @stnor We do have support for custom trigger DOM, so I do consider the flag selector case you mention to be a valid one. |
@mmalerba yes you're right. I was wrong saying my select was 110px, it's actually much smaller. In any case, you are right, that it does extend to the end of the select. My issue is still with the padding at the start. But I can easily work around that if that's intended behaviour. |
Thanks. So, is this use-case something you plan on supporting in the future with the select/forms, or are you saying it's supported now? If the latter, pointers would be appreciated. :) |
I'm saying its something we should support in the future. |
@mmalerba If possible looking for an update on if there will be an api to expose the ability to use minWidth instead of width or if there is a suggestion that can be used as workaround until then. |
Anyone found a workaround yet? |
@ly000 Same dilemma here so I spent a bit of time on achieving this the best way - we can make use of the
|
what is the issue to return the dropdown functionality from version 14? |
I've edited my comment above, if you use Not ideal but it is a simple work-around - I've had to push this to over 20+ apps :/
|
yep, but it won't help with the correct positioning of the select menu |
@didemchenko the selected item positioning effect was removed from material spec. So the v15 implementation is actually the good one. The only issue here is that imply constraining drop-down width to the container |
I can rephrase - similar functionality of version 14 is preferred
|
Adds an input that allows users to control the width of the panel. Fixes angular#26000.
Adds an input that allows users to control the width of the panel. Fixes #26000.
Any workaround?? our customer does not accept the new look, so we can't go to production with the new version. |
There will be an input to control the select's dropdown width in version 16.1. |
+1 additional bug for the select component and new panelWidth property. |
I found an easy solution: In styles.css add:
In your component use panelClass="fit-content" attribute:
This ensures the panel has the minimum width of the widest content in the select panel. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Feature Description
Since v15,
mat-select
dropdown menu width stick strictly to themat-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 amat-menu
alternative which is not built to work with form controlsUse Case
What was done in previous versions of Angular Material was great and solve issues exposed above
The text was updated successfully, but these errors were encountered: