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>
7 answers
solution1
4 2016-03-24 01:54:50
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.
solution2
3 ACCPTED 2015-05-19 08:29:35
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();
solution3
1 2018-01-04 20:50:32
If you use bootstrap in your Project, bind materialize.js after bootstrap.js on your site. This works for me
solution4
1 2018-10-07 08:26:17
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>
solution5
0 2016-12-10 09:13:05
In My project , this error happened because of bootstrap.js . just remove the reference to it and it will work fine..
solution6
0 2018-12-11 17:50:17
<!-- 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">HC@gmail.com</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> -->
solution7
0 2021-02-27 08:20:12
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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.