0

I'm trying to get a MaterializeCSS dropdown menu working inside a card, but nothing is happening when I click on the button.

I've prepared a jsfiddle with the examples from the documentation and all the answers I could find on stackoverflow and google, yet I still cannot get it to work. What am I doing wrong?

https://jsfiddle.net/mozfet/3k4dkk6s/

html

<div class="row">
  <div class="col s12">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>

        <!-- Dropdown Trigger -->
        <a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a>

        <!-- 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="#!">three</a></li>
        </ul>
      </div>
    </div>    
  </div>
</div>

js

$(document).ready(function() {
  console.log("intiate dropdown");
  $('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false,
    hover: true,
    gutter: 0,
    belowOrigin: false,
    alignment: 'left'
  });
});

css

.card {
  overflow: visible !important;
};
Mozfet
  • 359
  • 3
  • 12
  • 2
    Works if you switch to jQuery 2.x, so there must be compatibility issue with Materialize – nice ass Jan 14 '16 at 14:18
  • Thx, I've got it working on codepen http://codepen.io/anon/pen/BjdMyg. The only real difference I notice is the version of jquery... – Mozfet Jan 14 '16 at 14:19
  • I still cannot get it to work on the jsfiddle though... – Mozfet Jan 14 '16 at 14:35
  • I want to use this in my meteor app, but meteor uses jquery 1.11 and I cannot find how to upgrade this... has anyone managed to material dropdowns to work with meteor? – Mozfet Jan 14 '16 at 15:40

1 Answers1

0

There is a bug with dropdowns and selects in materialize 0.97.2 and 0.97.3; for more info see https://github.com/Dogfalo/materialize/issues/2265 and https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931.

I'm using the Sass version of MaterializeCSS in Meteor and worked around the problem by using poetic:materialize-scss@1.97.1 in my meteor packages file to force the old version. The dropdowns now work, old jquery and all!

Mozfet
  • 359
  • 3
  • 12