CODEWITHSUNDEEP
javascriptcsshtmldrop-down-menumaterialize
filippo90
filippo90

Reputation: 367

Materialize dropdown doesn't work

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>

Upvotes: 6

Views: 28801

Answers (7)

Akash Pise
Akash Pise

Reputation: 98

use this code it will work

    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.collapsible').collapsible();
  });

Upvotes: 0

I&#39;am
I&#39;am

Reputation: 1

<!-- Kindly be well advised there is nothing wrong with the code provided with regard to the subject.

However, there are minor HTML tag("span tags") usage violation(s) and missing tags. Moreover, the CDN source tags links must be arrange in a chronological order, see below. I assume this was a copy/paste from your part. :) Nevertheless, always keep your code tidy, clean, well-formed and respect the HTML "Use Correct Document Type" Coding Conventions. Always declare the document type as the first line in your document: -->

<!DOCTYPE html>
<html lang="en-US">

<!--

Declaring a language is important for accessibility applications (screen readers) and search engines. However, we do not recommend omitting the html tags and the body tags. Omitting html tags or body tags can crash DOM and XML software. Omitting body tags can also produce errors in older browsers (IE9).

In HTML5, the head tags can be omitted. By default, browsers will add all elements before body tags to a default head tags element. You can reduce the complexity of HTML by omitting the head tags:

set of navigational links is before the body tags: -->

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://google.github.io/material-design-icons/">

<!--Import Boostrap Icon Font-->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.1.34/css/materialdesignicons.min.css"> 

<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<title>Materialize Dropdown List </title>

<body>
<!-- Page Content goes here, <div> tags, <ul> tags, <li> tags and <main> tags which specify the main content of a document-->

<!-- Slide-Out Structure -->
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
    <div class="background">
        <i class="mdi mdi-office small"></i>
    </div>
        <a href="#user"><img class="circle" src="https://www.directlink.coop/img/icons/avatars/145841-avatar-set/png/boy-1.png"></a>
        <a href="#name"><span class="black-text name">HappyCoder</span></a>
        <a href="#email"><span class="black-text email">[email protected]</span></a>
</div>
</li>
    <li><a href="#!"><i class="material-icons">cloud</i>MyCloud data vault</a></li>
    <!-- Dropdown Trigger -->
    <li><a href='#' data-target='dropdown1' class='dropdown-trigger'>Drop Me!</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Admin</a></li>
    <li><a class="waves-effect" href="#!">Bitcoin Expenses</a></li>
</ul>

<!-- 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="#!">If this has helped you in any way, you know what to do.</a></li>
</ul>
<!-- Slide-Out Trigger -->
<div class="row">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="mdi mdi-menu medium black-text left"></i></a>
</div>

<!--Main layout-->
<main>
</main>

<!-- Optional JavaScript -->
<!-- Arrange the jQuery first, then Bootstrap JS, and then the materialize JS chronologically using latest versions -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<!-- The traditional method of initializing JQuery, compatible with most browser -->
<script>
$(document).ready(function(){
    //Sidebar
  $('.sidenav').sidenav({menuWidth: 320, inDuration: 700, outDuration: 225, activationWidth: 70, edge: 'right'});
    // Dropdown
        $('.dropdown-trigger').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
        });
  });
</script>
</body>
</hmtl>
        <!-- Close All HTML Elements 
        **BAD**: </span>
        **Good**: <span>/span> -->

Upvotes: 0

Marlon da Veiga
Marlon da Veiga

Reputation: 618

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

Upvotes: 1

Serg
Serg

Reputation: 845

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

Upvotes: 1

S.Mohamed Mahdi Ahmadian zadeh
S.Mohamed Mahdi Ahmadian zadeh

Reputation: 2406

In My project , this error happened because of bootstrap.js . just remove the reference to it and it will work fine..

Upvotes: 0

Andrew Dunai
Andrew Dunai

Reputation: 3129

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.

Upvotes: 4

nexuscreator
nexuscreator

Reputation: 845

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();

Upvotes: 3

Related Questions