Materialize Dropdown hide behind other elements

Question

I added some dropdown menus from Materialize and I'm having issues with them being behind other elements (pic attached). I have tried changing the z-index of the options (z-index: 100;) and the z-index of the other divs (z-index: -1;).

HTML:

                      <div class="column source">
                          <label for="source1">Source of Income</label>
                          <select class="validate dark" id="source1" value="<?= income1Data[1] ?>" onchange="getHeader1();" required>
                            <option disabled><?= income1Data[1] ?></option>
                            <option>Employment</option>
                            <option>Unemployment</option>
                            <option>Social Security</option>
                            <option>Retirement</option>
                            <option>Side Job</option>
                            <option>Benefits</option>
                            <option>Bonus</option>
                            <option>Other</option>
                          </select>
                      </div>

           <div class="table-body x18" id="bill-table">
             <hr />
             <div class="table-row x20">
               <h3 class="title">Bills and Debt</h3>
             </div>
           </div>

JavaScript:

  document.addEventListener('DOMContentLoaded', function() {
    var elements = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elements);
};

CSS:

#bill-table {
  z-index:-1;
}

ul.dropdown-content.select-dropdown li span {
    z-index:100; //I used "color: red" to test and the color works, but z-index doesn't bring to front
}

score 1 · Answer 1 · answered Apr 18 '20 at 18:53

1

I think that perhaps the issue you are experiencing here is due to the fact that z-index only works on positioned elements, e.g. https://www.w3schools.com/cssref/pr_class_position.asp

I made a quick fiddle here to explain it: https://jsfiddle.net/LukeUK/ptym15qx/10/ Hope this helps! :)

CSS

.pink-square {
  position: absolute;
  z-index: 1;
  background: pink;
  height: 300px;
  width: 300px;
}

.blue-square {
  position: absolute;
  top: 100px;
  left: 100px;
  background: blue;
  height: 300px;
  width: 300px;
}

HTML

<div class="pink-square"></div>
<div class="blue-square"></div>

answered Apr 18 '20 at 18:53

Luke Bennett

41
1
10

That clearly explains the z-index! Thank you for letting me know, I didn't realize that. Is there another route to take to bring the menu to the front? – jrob11 Apr 18 '20 at 18:57
I tried adding the position to the dropdown and it didn't work. It worked when I added the position to the other divs instead (that were previously causing the dropdown to hide). – jrob11 Apr 18 '20 at 19:05
No worries! :) Ahh interesting, so the positioning didn't work on the ` – Luke Bennett Apr 18 '20 at 23:57

score 1 · Accepted Answer · answered Apr 18 '20 at 18:57

1

z-index property won't do any effect if the elements aren't positioned, try to add a position property foreach bloc based on your use case

answered Apr 18 '20 at 18:57

Hamza Boularbah

110
1
11

1

between you and @Luke Bennett, i got it! Luke explained about the z-index. The solution was simple, I just had to add ```position: relative;``` to the ```#bill-table``` div. – jrob11 Apr 18 '20 at 19:04

Materialize Dropdown hide behind other elements

2 Answers2