Materialize dropdown doesn't work

Question

I'm trying to make a dropdown menu inside a sidebar with Materialize, but it doesn't work. the width of the dropdown isn't the same as the trigger and the padding move the anchor to the bottom of the list item. (The code is the same as the docs website)

Here is a Codepen with the issue: example

Thanks for the help :)

$(document).ready(function(){
      
      // Sidebar
      $(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'left'});
      // Dropdown
      $('.dropdown-button').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: false, // Does not change width of dropdown to that of the activator
           hover: false, // Activate on hover
           gutter: 0, // Spacing from edge
           belowOrigin: false // Displays dropdown below the button
           }
      );
    });

<div id="slide-out" class="side-nav full">
  <ul>
      <li><a href="#">First Link</span></a></li>
      <li><a href="#">Second Link</span></a></li>
      <!-- Dropdown Trigger -->
      <li><a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a></li>
  </ul>
</div>

<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>

<div class="row">
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu medium black-text left"></i></a>
</div>

Solution 1

You can set the constraint_width = true or simply initialize dropdown without passing any json object.

$('.dropdown-button').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: true, 
           hover: false, 
           gutter: 0, 
           belowOrigin: false 
           }
      );

Or you may initialize the dropdown with its defaults(by the way, json object provided above is the default dropdown value).

$('.dropdown-button').dropdown();

Solution 2

For anyone having similar issue: I've got a similar problem because I was using jQuery 3.x beta. Switched to 2.2.2 and now it's fine. Seems like some changes in animations mechanisms.

Hope this helps somebody.

Solution 3

If you use bootstrap in your Project, bind materialize.js after bootstrap.js on your site. This works for me

Solution 4

After facing the same situation, I found a solution using another Jquery method:

$(".dropdown-trigger").dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<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>
<nav>
  <div class="nav-wrapper">
   
    <ul class="left ">
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown</a></li>
    </ul>
  </div>
</nav>

source of solution

View more solutions

Comments

[declension]

For a start you should fix that invalid HTML - remove the unopened </span>s

[Luis Estevez]

Welcome to stackoverflow I'am! Here we don't just give someone code. We also explain it. So if you can do so that would be helpful to the person asking the question.

[I'am]

@Luis Estevez Done, as per house rules request(s). I hope it makes sense to whom it may concern.

[Mustak_Talukder]

Use it in your js (It's working for me). I have been loaded dropdown HTML from laravel controller. $(document).on('focus','.dropdown-button',function(){ $('.dropdown-button').dropdown(); });