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.

[ghost]

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

[winiram]

This is happening. I am using 0.97.0. Any suggestions?

[lordplagus02]

Any news on this?

[IaraNascimento]

I had the same problem: when i open the options/dropdown from a select inside a card the options appear behind the other cards in the page. I tried change the z-index, and it looked like was going to work... but it didn't. I put one card with a bigger z-index and all selects inside it gets in front of the others cards, and them i find myself in same problem, because the others cards also had selects and now they were behind the one that i just had increased the z-index.

So i tried make the z-index change more dynamically using hover. Like this:

.card {
z-index: 0;
}
.card:hover {
z-index: 1 !important;
}

Now it is better... but is still get weird when the mouse goes out of the card with the select open. So i think i'll do a js with mouse-in ando mouse-out. But for now i'll use this second solution.

[alan-ren]

The :hover response above doesn't work for my particular implementation (I have multiple selects in a single modal).

However, I've added the below snippet to my materializeHandler() global helper function, which I use to run all of the jQuery inits. All of my select elements are currently wrapped in a div with the select-wrapper class, which is what I'm referencing here. This dynamically sets the CSS of each of the parent wrappers on initialization such that the earlier selects in the page will always have a higher z-index than the later ones.

$(".select-wrapper").each(function(i) {
    $(this).css({"z-index" : 500 - i})
})

[nivinjoseph]

This might be a stacking context issue as mentioned in this article https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

I had a similar problem with card in main area overlapping dropdown-content in the top navbar. Setting the z-index of the navbar, which in my case was the parent of the dropdown-content, to 1 solved the issue.

[geekDago]

I'm having this problem again: overflow-y: visible on the .modal seemed to be the solution, but if one reduces the windows size or use it on mobile, the modal content "flows" over the screen outside the modal

[acburst]

Changed z-index of dropdown in 42aa747.

[joaorsfonseca]

This is not fixed on last version 0.100.2..

[smadapathi]

We still face the same issue mentioned by @joaorsfonseca

[acburst]

We are not planning anymore releases to the v0.100.x version. I meant its fixed on our v1.0.0 alpha branch. Sorry for the confusion

[smadapathi]

any workaround for this bug?

[drorhilman]

I fixed a similar problem by giving the .card div where the inputs are style="z-index:100",
and to all the other cards a smaller z-index (ex. style="z-index:99" ). this fixed the behavior

[Rowadz]

Solution:

Image

 $(".dropdown-trigger").dropdown({
        constrainWidth: false,
        onOpenStart: () => {
                // the elements the dropdown should be on top of.
                $('.card').css('z-index',-1)
                $('.chip').css('z-index', -1)
                $('.postImage').css('z-index', -1)
                $('.parallax-container').css('z-index', -1)
                $('.collection').css('z-index', -1)
        },
        onCloseStart : () => {
            // return the elements to there first state so the user can interact with them
            $('.card').css('z-index', 1)
            $('.card-title').css('z-index', 1)
            $('.postImage').css('z-index', 1)
            $('.parallax-container').css('z-index', 1)
            $('.collection').css('z-index', 1)
        }
    })

read more : here

[bernardoadc]

Nothing above worked for me (due to project particularities). My solution was to overcome the stacking context, increasing the parent's (and in some cases grand-parent's) z-index value.

[timothymarois]

Having the same issue. Not seeing a solution. Why is this even a problem, people have already done this and already solved these issues with matured versions of js plugins like Chosen, Select2 etc.

[simkessy]

@timothymarois agreed, not even sure if this is really maintained anymore.

[amoliski]

They claim to have fixed it in 1.0.0, but I'm still having this problem:

https://codepen.io/anon/pen/oaJOEj

Edit: Cleared it up. Have to say this is not intuitive at all

var elem = document.getElementById('select_dropdown');
M.FormSelect.init(elem, {dropdownOptions:{container:document.body}});

[jnorton2]

This was our solution:

.select-dropdown {
    top: 0 !important;
}

[ronpetit]

They claim to have fixed it in 1.0.0, but I'm still having this problem:

https://codepen.io/anon/pen/oaJOEj

Edit: Cleared it up. Have to say this is not intuitive at all

var elem = document.getElementById('select_dropdown');
M.FormSelect.init(elem, {dropdownOptions:{container:document.body}});

Really it is not, this should be pointed out in the documentation