CODEWITHSUNDEEP
htmlmaterialize
Viljar Baumanhhh
Viljar Baumanhhh

Reputation: 21

How to set dropdown overlap other elements in materialize

I'm trying to set a dropdown to overlap other elements in materialize.

The problem I'm having is with the last collection item and its dropdown.

When you open the dropdown, it is placed underneath the other elements.

How can I have it overlap instead?

Here is demo jsfiddle:

https://jsfiddle.net/hgyj9r88/

<ul class="collection">
<li class="collection-item avatar">
  <img src="images/yuna.jpg" alt="" class="circle">
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
  <i class="material-icons circle">folder</i>
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
  <i class="material-icons circle green">insert_chart</i>
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
  <i class="material-icons circle red">play_arrow</i>
  <span class="title">Title</span>
  <p>First Line <br>
     Second Line
       <!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
  </p>
  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>

Upvotes: 1

Views: 736

Answers (1)

drosam
drosam

Reputation: 2896

The class .collection has overflow: hidden; if you set overflow: visible; to the ul you will see the dropdown. Here is the jsfiddle working https://jsfiddle.net/hgyj9r88/2/

Upvotes: 2

Related Questions