bug: materialize select in modal

[roiLeo]

Long select list in modal overflow

Current Behavior

Materialize select with multiple option change the modal height. We don't know if the select option has reached the end. Maybe it's missing some bottom margin ?

Possible Solution

The list could be overlapping the modal content or have a max-height.

Steps to Reproduce (for bugs)

• create a materialize select and add multiple option in a modal

Environment

• Version used: Materialize V1
• Operating System and version (desktop or mobile): tested on Firefox and Chrome
• Codepen: https://codepen.io/roileo/pen/yLOGjXa

[nicknickel]

I've seen this issue as well. I got around it by adding overflow-y: visible; to the div with the modal class. I don't think that's a very elegant fix, though, since that breaks scroll on the modal so any content that's larger than the modal shows outside the modal. It only worked for me because the modal didn't have much content in it. There might be a fix with setting the z-index on the dropdown but I couldn't fine one that worked.

In any case, modals could probably be improved to handle the dropdown component better.

[Smankusors]

the latest PR Dogfalo#6602 from Dogfalo's repo could be related though.

[Sorc96]

The solution is to specify the container for the Dropdown.

M.FormSelect.init(element, {
  dropdownOptions: {
    container: document.body
  }
}

Unfortunately, not all components that use a Dropdown accept dropdownOptions. I have been dealing with this problem in the case of Autocomplete. The mentioned PR in the old repo solves this. It would be nice to have this option added.

[Smankusors]

I just realized that select component already have dropdownOptions property like @Sorc96 mentioned. So this issue is not bug, but more like the documentation need a example for this.

[roiLeo]

I've found the same problem with materialize Autocomplete component

Edit: nvm #60 is related

[wuda-io]

Can we close this?

[roiLeo]

Still need documentation fix about components that can be in container

[cmcknight]

I'm limiting the height of my dropdown by setting the .select-dropdown height,

.select-dropdown {
   height: 8rem;
   max-height: 8rem;
}