Customisable select panel height
See original GitHub issuePlease describe the feature you would like to request.
Configuration of the panel height for MatSelect.
What is the use-case or motivation for this proposal?
- display more select options to the user if screen estate allows it
- fix repositioning of clicked option when the panel is opened with select:multiple
Is there anything else we should know?
This is part feature, part fix as my main use case was the following:
- use a select with multiple choice
- display more options by overriding the panel max-height style as suggested in #11780
This suggestion works, but adds a weird repositioning of the selected option if it is below the hardcoded 256px limit. It is reproducible with all versions below angular-material 7.3.7 (and including master).
Reproductible test case: https://stackblitz.com/edit/angular-select-panel video: https://streamable.com/g0z7k
This snippet is based on the multiple select example from the documentation. I simply added a class to increase the height of the select panel.
If you select anything below the Leek
option, the scrollbar is moved to make the option “visible” in the panel.
The option is obviously visible to us, but as the height of the panel is hardcoded at 256px, it is considered out of it by the computation of MatSelect component.
I initially only wanted to fix the issue I just described, but after reviewing the component’s code, I thought it would be cleaner to freely configure the panel’s height. Depending on screen space availability, people can decide how big they want the panel to be. Additionally it can also be dynamically set if one wants to support multiple screen sizes.
This would fix:
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:6 (3 by maintainers)
Top GitHub Comments
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.
Find more details about Angular’s feature request process in our documentation.
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.