Dropdown Materialize data attributes

Navigation
-1

I'm using materialize in a project and when creating a dropdown menu I can not use the options available in the materialize documentation to customize the dropdown.

Options such as: data-hover="true" data-beloworigin="true" data-cosntrainwidth="false"

Still, the dropdown does not appear when hovering and continues to open over the clicked item.

The code for the menu item configured with the dropdown is as follows: 

'<li>
   <a class="dropdown-trigger" data-target="dropdown1" data-activates="dropdown1" data-hover="true" data-beloworigin="true" data-cosntrainwidth="false"> Prefeitura
     <i class="material-icons right">arrow_drop_down</i>
   </a>
</li>'

If you know how to help me please understand why these date options do not work.

    
asked by anonymous 02.07.2018 / 20:22

1 answer

0

You're using the properties the wrong way I believe. Customization must be done with attributes in the component script as in the example below. 

$('.dropdown-trigger').dropdown({ suas opções aqui });

You can consult the official documentation that you will see what options you can use. constrainWidth coverTrigger and hover link

Notice that now when you do hover dropdown already appears below ... 

$('.dropdown-trigger').dropdown({ 
  hover: true,
  inDuration:	1500,
  coverTrigger: false,
  constrainWidth: true
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  
  <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Meu Dropdown</a>


  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>
    
02.07.2018 / 21:55
"Notice: Undefined index:" error Cart Behavior on Woocommerce