web-dev-qa-db-fra.com

La liste déroulante Matérialiser ne fonctionne pas

J'essaie de créer un menu déroulant à l'intérieur d'une barre latérale avec Materialise, mais cela ne fonctionne pas. La largeur de la liste déroulante n'est pas la même que celle du déclencheur et le remplissage déplace l'ancre au bas de l'élément de la liste. (Le code est le même que celui du site Web docs)

Voici un Codepen avec le problème: exemple

Merci pour l'aide :)

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

javascriptcsshtml5drop-down-menumaterialize
6
filippo90

Vous pouvez définir le constraint_width = true ou simplement initialiser la liste déroulante sans transmettre d'objet JSON.

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

Ou vous pouvez initialiser la liste déroulante avec ses valeurs par défaut (en passant, l’objet json fourni ci-dessus est la valeur par défaut de la liste déroulante).

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

Pour tous ceux qui ont un problème similaire: J'ai un problème similaire parce que j'utilisais la version bêta de jQuery 3.x. Passé à 2.2.2 et maintenant ça va. On dirait quelques changements dans les mécanismes d'animation.

J'espère que ça aide quelqu'un.

4
Andrew Dunai

Après avoir fait face à la même situation, j'ai trouvé une solution en utilisant une autre méthode Jquery:

$(".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 de solution

1
Marlon da Veiga

Si vous utilisez bootstrap dans votre projet, liez materialize.js after bootstrap.js sur votre site. Ça marche pour moi

1
Serg

Dans mon projet, cette erreur est survenue à cause de bootstrap.js. il suffit de supprimer la référence et cela fonctionnera bien ..

0
S.Mohamed Mahdi Ahmadian zadeh
<!-- Kindly be well advised there is nothing wrong with the code provided with regard to the subject.

Toutefois, il existe des violations d'utilisation mineures des balises HTML ("balises étendues") et des balises manquantes. De plus, les liens des balises source CDN doivent être rangés dans un ordre chronologique, voir ci-dessous. Je suppose que c'était un copier/coller de votre part. :) Néanmoins, gardez toujours votre code propre, net, bien formé et respectez les conventions de codage HTML "Utiliser le type de document correct". Déclarez toujours le type de document comme première ligne de votre document: ->

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

<!--

La déclaration d'une langue est importante pour les applications d'accessibilité (lecteurs d'écran) et les moteurs de recherche. Cependant, nous vous déconseillons d'omettre les balises HTML et les balises body. L'omission des balises HTML ou body peut provoquer un crash de DOM. et le logiciel XML. L'omission de balises body peut également générer des erreurs dans les anciens navigateurs (IE9).

En HTML5, les balises d'en-tête peuvent être omises. Par défaut, les navigateurs ajoutent tous les éléments avant les balises body à un élément d'étiquettes d'en-tête par défaut. Vous pouvez réduire la complexité du code HTML en omettant les balises d'en-tête :

ensemble de liens de navigation est avant les balises body: ->

<!--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> -->
0
I'am