Meteor with Semantic UI dropdown behavior not working

Question

I am currently trying to integrate Semantic UI into my app. The visual styling is displaying fine. However, behaviors do not appear to be working and I am not able to raise any form of exceptions in my console to help with debugging.

I created a Meteor test app at https://github.com/andersr/semantic-test
I do not see any exceptions in the console and am not sure how to troubleshoot this. Any suggestions would be appreciated.

Some relevant code snippets:

Markup for a user nav dropdown:

<div class="ui dropdown link item"> {{currentUser.name}} <i class="dropdown icon"></i> <div class="menu"> <a class="item">Sign Out</a> </div> </div>

custom.semantic.json file:

{
  "definitions": {
  ...
  "dropdown": true,
  ...
 }

}

Invoking the dropdown in /client/client.js (though not sure if this is needed):

$('.dropdown').dropdown({
  transition: 'drop'
});

saimeunt · Accepted Answer · 2015-06-14 21:28:59Z

4

jQuery plugins need to be initalized when the corresponding HTML elements have been inserted in the DOM, which is usually the case in standard server side rendered webapps, but Meteor takes a different approach by using client side reactive templating, all the HTML generation is done in the browser.

This is why you need to initialize jQuery plugins when Meteor has done inserting your dropdown in the document, you can use the template onRendered lifecycle event to detect when you can safely activate the widget behavior.

JS

Template.dropdown.onRendered(function(){
  this.$(".dropdown").dropdown();
});

HTML

<template name="dropdown">
  <div class="ui dropdown link item">
    {{currentUser.name}} <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item">Sign Out</a>
    </div>
  </div>
</template>

answered Jun 14, 2015 at 21:28

saimeunt

22.7k2 gold badges58 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andersr Over a year ago

That fixed it. Thanks! (And I will now submit a request to the maintainers of github.com/Semantic-Org/Semantic-UI-Meteor to consider mentioning the need for including this in their ReadMe docs.)

Collectives™ on Stack Overflow

Meteor with Semantic UI dropdown behavior not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related