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.

[MDCSelect] overflow inside of dialog

See original GitHub issue

Bug report

Select within dialog creates overflow for dropdown menu

That was one of the reasons we used mdc-select__native-control, besides #5428 (we can’t simply send form data as fetch(url, new FormData(formElement)) now). Also mobiles handle native select dropdowns better.

Steps to reproduce

Create dialog with MDCSelect inside

Actual behavior

↑

Expected behavior

Not to have overlay.

Your Environment:

Software	Version(s)
MDC Web	4.0.0
Browser	Brave / Chrome
Operating System	Win10

Possible solution

Hoist menu to body in some way?

Issue Analytics

State:
Created 4 years ago
Reactions:8
Comments:13 (7 by maintainers)

Top GitHub Comments

1reaction

arnaudbuycommented, May 2, 2020

Using mdc-menu-surface--fixed can help

0reactions

simonzieglercommented, Jul 11, 2020

This problem has now been fixed the the Material Theme team. As a note for anybody wondering how to apply this to their own projects, do the following:

Use Material Theme 7.0.0
Add the mdc-menu-surface--fixed class to the div that already has the mdc-select__menu class
Add a new class, eg my-width-class to the two div with classes mdc-select__anchor and mdc-select__menu
Set an explicit width in my-width-class, e.g. 200px

Top Results From Across the Web

mdc-select inside a mdc-dialog : r/MaterialDesign

Hi Im working with material components web - mdc ( https://material.io/ ) without any frontend frameworks, just typescript and html.

Not able to update value in mdc-dialog using ngModel

But the value is not updated inside a <mdc-dialog> . I have imported FormsModule in app.module.ts file. But then also I am having...

mdb-select in container with overflow

Hello, if I use mdb-select in modal-body with overflow (adding .modal-dialog-scrollable to modal-dialog), then select options are not drawing correctly over ...

Mdc Select Dropdown Jumps To Bottom

Since MDC Select does not use a element add a hidden element to capture the value in HTML [MDCSelect] overflow inside of dialog...

@material/dialog | Yarn - Package Manager

Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these...