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.
As an example, here is the markup for a user nav dropdown:
Nothing happens when clicking on the dropdown.
In my custom.semantic.json file, I have
In /client/client/js I added this based on usage docs info here:
More just for good measure, since it is not clear if including these jquery calls is needed.
Also, for reference, these are the packages I have installed:
accounts-google 1.0.4 Login service for Google accounts
accounts-ui 1.1.5 Simple templates to add login widgets to an app
copleykj:jquery-autosize 1.17.8 Automatically adjust textarea height based on user input.
copleykj:livestamp 1.1.7 jQuery plugin providing auto-updating timeago text to your timestamped HTML elements using Moment.js
flemay:less-autoprefixer 1.0.2 The dynamic stylesheet language + Autoprefixer
fortawesome:fontawesome 4.3.0 Font Awesome (official): 500+ scalable vector icons, customizable via CSS, Retina friendly
iron:router 1.0.9 Routing specifically designed for Meteor
markdown 1.0.4 Markdown-to-HTML processor
matteodem:easy-search 1.5.6 Easy-to-use search with Blaze Components (+ Elastic Search support)
meteor-platform 1.2.2 Include a standard set of Meteor packages in your app
msavin:mongol 1.0.97 The insanely handy development package for Meteor.
reactive-var 1.0.5 Reactive variable
sacha:spin 2.0.4 Simple spinner package for Meteor
semantic:ui 1.12.1_1 Official Semantic UI Integration for Meteor
underscore 1.0.3 Collection of small helpers: _.map, _.each, ...
useraccounts:semantic-ui 1.11.1 Accounts Templates styled for Semantic UI.
Any tips on solving this issue, or how I might go about troubleshooting it, would be appreciated.
To eliminate the possibility that there might be a conflict with other packages etc, I created a fresh meteor app and installed only what is needed for semantic UI. I still get the same issue. Please see https://github.com/andersr/semantic-test
Oh they are absolutely needed! The basic integration cannot actually make those JS calls for you, it simply has no way of knowing which of your templates require JS behaviors, and when.
I’m using Semantic UI on multiple projects and what you have to do is the following:
Place those “behavior JS snippets” from the docs in Template.xxx.onRendered() callbacks so that they will be called in the appropriate places, and right when they are required and have the right HTML elements avilable to work with. Because just calling something like the above right when the JS is loaded doesn’t make sense because there are no rendered templates yet that could be enhanced with JS behavior.
Also, instead of using the global $ for the selectors, use this.$, so you properly scope them to just your template. See TemplateInstance.$ docs.
If you need more specific help or explanations then type out a couple more questions and I’ll be happy to provide more specifics.
It would certainly be super nice, if someone were to take the Semantic UI markup + JS and put them together into reusable complete templates that just work out of the box, where you don’t have to connect up the JS “manually” on template render. For now it hasn’t been worth the effort for me to jump into such an endeavor, haven’t been using SUI JS that heavily, just sprinkled in between here and there!
Experienced a bunch of problems with Semantic UI & blaze / react… You need to set the context ( http://semantic-ui.com/modules/sidebar.html#/settings ) or set the detachable to false (modals) as they are moved within the DOM after init and blaze / react is unable to reach them.