svelte-material-ui
svelte-material-ui copied to clipboard
Select in v4.1.0 is missing dynamic max-height
Describe the bug
The <Select>
component no longer sets a dynamic max-height
that adjusts with the available vertical space on the page.
To Reproduce Steps to reproduce the behavior:
- Mount a
<Select>
- Open the surface menu by clicking on the select element
- You can use the dev tools and resize to reduce the available vertical space on the page
- Notice that no matter the verticle space available the menu surface will always have the same height
Expected behavior The menu surface should adapt height to available space.
Screenshots
Desktop (please complete the following information):
- OS: MacOS Catallina
- Chrome
- Version smui 4.1.0
Smartphone (please complete the following information): N/A
Can confirm that this exists.
@CryptAlchemy shall I get to understand the status of the bug so that I could be a help in hand? I also face the same issue as shown below:
I found the solution: https://github.com/material-components/material-components-web/issues/5590#issuecomment-657032119 Added this:
:global(.with-parameter__menu) {
width: 300px;
left: auto !important;
}
<Select
menu$class="mdc-menu-surface--fixed with-parameter__menu"
class="with-parameter"
Important was the only hack I could see as the left was set to 0 by default and to have it aligned with the select field, it had to be unset.
Thanks, it helped a lot. I also had to put top: auto !important;
to fix dialog position on screen. It was too high above select.