Clever Geek Handbook

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


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


source






More articles:


All Articles