Dropdown is behind as z-index doesn't apply

[zippoxer]

This issue doesn't apply to the current release version 0.96.1, only to the current master branch.

The problem is that a (not yet released) change is attaching the dropdown element to the activator element, therefore forcing the dropdown menu to adopt the z-index of the activator's parent causing it to be partially hidden in various cases.

Previously, I was placing dropdown elements inside the body element, they were showing in the right place and above anything as dropdown elements have z-index of 999.
Now, dropdown elements, no matter where you put them, end up being next to their activators and therefore adopting the z-index of their activator's parent.

In my case, I have a list of boxes, all with identical z-index (well below the defined 999 of a dropdown menu) and a menu button at their right edge. Since the dropdown adopts the box's z-index, the dropdown is always hidden by the next box in the list, as the next box was appended later to the page and therefore appears above the previous.

[ckdt]

Same issue over here

[zippoxer]

This issue also causes another problem, I just discovered. The dropdown menu is cut or hidden if it's parent element has overflow: hidden:

Why don't revert the changes back to when the dropdown wasn't attaching to it's activator?

[jcapogna]

I think was fixed in 0.97.0. I just upgraded from 0.96.1 to 0.97.0 specifically to fix this problem (my dropdown was showing underneath my submit button).

[carlosperate]

I'm using a new version than 0.97.0 (js grabbed from master) and my dropdowns are still behind the modal footer (from modal with fixed footer) with a scrollbar, as the materialize select ul element is attached to the parent.

[nathanjohnson320]

I had a similar issue but the dropdown was being hidden by overflow (i.e. inside a .card) so I just changed overflow of the parent element to visible and that fixed it.

[exp0nge]

Same issue for when dropdown is inside a collection.

[osxi]

@nathanjohnson320's suggestion helped me fix the issue.

In my case, I had a select inside of a div class="card" and setting the card to something other than overflow: none; caused the overflow contents to show up as you would expect.

[serkandurusoy]

I'm using dropdown within a collection and facing the same problem.

.collection {
  overflow: visible;
}

solved it in my case, but I don't know if this messes with something else.

[osxi]

@serkandurusoy, that's a good point. To prevent that, you could just use a class like contacts-collection and use something along the lines of:

.contacts-collection {
  @extend .collection;
  overflow: visible;
}

This way, other collections won't be affected.

[serkandurusoy]

@osxi thanks for the suggestion.

@nathanjohnson320 overflow-y: visible on the .modal class worked well for me, too!