How does dropdown work in Meteor?

[thetechnaddict]

I've tried adding a drop down to a template using the example in the materialize documentation.

          <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' 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>

The drop down does not drop down.

I've tried adding initialisation code to the template' s on rendered function:

Template.accountsAdmin.rendered = function() {
this.$('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false, // Does not change width of dropdown to that of the activator
    hover: true, // Activate on hover
    gutter: 0, // Spacing from edge
    belowOrigin: false // Displays dropdown below the button
});
 };

But that doesn't help.

What am I doing wrong or rather what should I be doing?

The button renders and click handlers will trigger...

[kevohagan]

I can't seem to reproduce your error. I just copy pasted your code in a materialize meteor project and it works fine.

Any more info on this?

[thetechnaddict]

Thanks - I'll create a fresh app and try to recreate it. May take me a little time...

[thetechnaddict]

Yes, works perfectly on a new project.

I'll start adding packages to see if any are interfering.

[thetechnaddict]

I apologise - having gone through everything it is working with apparently no changes - although the z-index is not currently correct - I am using it within collection-items and it is covered by the collection container.

I think this problem, which may not be the original problem (!) is a duplicate of this

#1385

Closing this one as some inexplicable user error...