Dropdown Materialize date attributes

Asked

Viewed 417 times

-1

I’m using materialize in a project and when creating a dropdown menu I can’t 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 is not displayed while hovering and continues to open on top of the clicked item.

The code of 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 can help me please understand why these date options don’t work.

materialize
  • 1

    I could post your code?

  • 1

    Face the first step for you to get an answer that suits you is to edit the question and include the HTML / CSS and JS code you are using. Without this we can not answer you. And tell which version of Materialize you are using!

  • Version v1.0.0 materializes

1 answer

0

Man you’re using the properties the wrong way I believe. Customization should 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 which options you can use. constrainWidth coverTrigger and hover https://materializecss.com/dropdown.html

Notice that now when doing the hover the 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>
  <script src="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>

  • Thank you. The real problem was the Jquery version

Browser other questions tagged materialize

You are not signed in. Login or sign up in order to post.