[MDCSelect] overflow inside of dialog

[dy]

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

1. 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?

[SamProf]

Same issue

[asyncLiz]

Thanks for the issue! Definitely is a problem 😔

[Pupix]

I fixed it by using mdcSelect.setFixedPosition(true) after instantiation.

[DimaChaichan]

I fixed it by using mdcSelect.setFixedPosition(true) after instantiation.

Don't works for me. A Fixed Postion make problems. If you scale the window for example the Selection postion are not updated.

The problem is the Selection must open to the top, not to the bottom. With this you can fix the Problem. But is more a Hack then really a fix. This CSS will open the last Selection to Top.

.mdc-dialog__content  {
  .mdc-select__menu:last-child {
    top: auto !important;
    bottom: 56px !important;
  }
}

But the calculation of open the menu ist wrong in a Dialog

[arnaudbuy]

Using mdc-menu-surface--fixed can help

[ftaiolivista]

Using mdc-menu-surface--fixed can help

@arnaudbuy Fixed prevent the cutoff but with it the dropdown start from the center of the select field

[abhiomkar]

Setting menu to fixed position will work with a workaround. Any ancestors of menu should not contain transform property other than none.

Workaround for incorrect menu positioning when it is fixed: Set dialog's root elements transform property to none.

MDN:

Position fixed The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

[arnaudbuy]

@ftaiolivista

From the documentation

The select requires that you set the width of the mdc-selectanchor element as well as setting the width of the mdc-selectmenu element to match.

[ftaiolivista]

Set dialog's root elements transform property to none.

@abhiomkar thats works.

[simonziegler]

I have this too, but am still using MT 6.0.0. Has this been worked on for 7.0.0 please?

[allan-chen]

6012 should have removed the transform property from dialog (included in 7.0.0). Setting menu to position fixed and defining a custom width for the anchor + menu should resolve this.

[simonziegler]

Thanks!

[simonziegler]

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