svelte-material-ui icon indicating copy to clipboard operation
svelte-material-ui copied to clipboard

Select in v4.1.0 is missing dynamic max-height

Open danielcaldas opened this issue 3 years ago • 4 comments

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:

  1. Mount a <Select>
  2. Open the surface menu by clicking on the select element
  3. You can use the dev tools and resize to reduce the available vertical space on the page
  4. 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 image

Desktop (please complete the following information):

  • OS: MacOS Catallina
  • Chrome
  • Version smui 4.1.0

Smartphone (please complete the following information): N/A

danielcaldas avatar May 05 '21 13:05 danielcaldas

Can confirm that this exists.

CryptAlchemy avatar Jun 08 '22 22:06 CryptAlchemy

@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: image

varghesethomase avatar Mar 01 '23 17:03 varghesethomase

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.

varghesethomase avatar Mar 02 '23 08:03 varghesethomase

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.

mkyral avatar Sep 07 '23 10:09 mkyral