How to make a dropdown menu outside the map in Materialize
I have a Materialize card with a dropdown in the top right corner. However, when the dropdown button is clicked, the menu is displayed, but the contents of the menu do not extend beyond the map:
<ul id='myDropdown-menu' class='dropdown-content'>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
<div class="card white">
<div class="card-content grey-text text-darken-4">
<span class="card-title grey-text text-darken-4">Card Title</span>
<a id="myDropdown" class='btn-floating waves-effect waves-light transparent right' href='#' data-activates='myDropdown-menu'><i class="material-icons blue-grey-text text-darken-4">more_vert</i></a>
</div>
</div>
How can I get the dropdown menu to go outside the map?
http://jsfiddle.net/6sjLbrht/
+3
Luke
source
to share
1 answer
It seems to be in a class .card
overflow: hidden
that prevents the menu from appearing outside of the map boundaries. By adding the following style to your stylesheet, you can overcome this.
.card {
overflow: visible !important;
}
I've updated the JSFiddle to illustrate the fix:
http://jsfiddle.net/6sjLbrht/1/
+4
Luke
source
to share