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.

Customisable select panel height

See original GitHub issue

Please 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:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
angular-robot[bot]commented, Feb 21, 2022

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.

0reactions
angular-automatic-lock-bot[bot]commented, Dec 4, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

In angular7, how do I change the height of a mat-select when ...
First ::ng-deep .mat-select-panel in a component actually DOES define this css for the global space. So as soon as your component is used...
Read more >
Select | Angular Material
Allows the user to customize the trigger that is displayed when the select has a value. ... The max height of the select's...
Read more >
Controlling style & layout — Panel v0.14.2 - HoloViz Panel
“stretch_height” : Component will responsively resize to stretch to the available height, without maintaining any aspect ratio. The width of the component ...
Read more >
Modifiers - Prusa Knowledge Base
Right-click on a model and pick Height range modifier from the context menu. A new window will appear in the right panel called...
Read more >
Styling - Themify
Welcome to the Customize Panel Documentation, this guide contains ... the image width and height; To reposition the logo accordingly, choose the appropriate ......
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