All geek questions in one place

Materialize popup menu not working

I am trying to create a drop-down menu inside the sidebar using Materialize, but this will not work. the width of the drop-down menu does not match the trigger, and the padding moves the anchor to the bottom of the list item. (The code is the same as on the docs website)

Here is the Codepen with the problem: 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>
+6
source share
6 answers

You can set the constraint_width = true drop-down list or just initialize without passing any json object.

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

Or you can initialize a drop-down list with default values ​​(by the way, the above json object is the value of the default dropdown value).

 $('.dropdown-button').dropdown();
+3
source

For everyone who has a similar problem: I have a similar problem because I used jQuery 3.x beta. Switch to 2.2.2, and now it's fine. There seem to be some changes in the animation mechanisms.

Hope this helps someone.

+4
source

If you use bootstrap in your project, link the materialize.js file after bootstrap.js on your site. It works for me

+1
source

Faced with the same situation, I found a solution using a different 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 decision

+1
source

In my project, this error occurred due to bootstrap.js. just delete the link to it and it will work fine.

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

However, there are minor violations of the use of HTML tags ("span tags") and missing tags. In addition, links to CDN source tags must be in chronological order, see below. I assume it was a copy / paste on your part. :) Nevertheless, always keep your code neat, clean, correct and follow the HTML coding rules "Use the correct document type." Always declare a document type as the first line in your document: ->

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

Language declaration is important for advanced applications (screen readers) and search engines. However, we do not recommend omitting html tags and body tags. Skipping HTML tags or body tags can cause DOM and XML software to crash. Omitted body tags can also cause errors in older browsers (IE9).

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

Set of navigation links before 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.imtqy.com/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> -->
0
source

Source: https://habr.com/ru/post/987166/

More articles:


All Articles