Skip to content

Select in v4.1.0 is missing dynamic max-height #242

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.

Sign up for GitHub

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

Jump to bottom
Open
danielcaldas opened this issue May 5, 2021 · 4 comments · May be fixed by #480
Open

Select in v4.1.0 is missing dynamic max-height #242

danielcaldas opened this issue May 5, 2021 · 4 comments · May be fixed by #480
Labels
bug Something isn't working

Comments

@danielcaldas
Copy link

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 danielcaldas added the bug Something isn't working label May 5, 2021
@CryptAlchemy
Copy link
Contributor

CryptAlchemy commented Jun 8, 2022 •
edited
Loading

Can confirm that this exists.

This was referenced Jun 30, 2022
Open
Open
@varghesethomase
Copy link

@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
Copy link

I found the solution:
material-components/material-components-web#5590 (comment)
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.

@mkyral
Copy link

mkyral commented Sep 7, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
4 participants
@mkyral @varghesethomase @CryptAlchemy @danielcaldas