Semantic UI Behaviors Not Working in Meteor 1.3

Question

I decided to upgrade the new app I am developing to the Meteor 1.3 release. I followed 'The Official Guide' instructions from MDG for the recommended directory layout and, with a bit of refactoring of my FlowRouter code, was able to get the app almost working. The problem seems to be with the Semantic UI package (2.1.8) installed from Atmosphere. I did need to add the appropriate SUI *.less files to a top-level 'main.less' file in the 'client' directory to get the app to render a properly styled view. However, the SUI behaviors which worked nicely in Meteor 1.2 yesterday no longer work.

My assumption is that I need to import the SUI behaviors using the form...

import something from 'meteor/semantic:ui';

...but I haven't been able to identify the correct import statement. Semantic UI doesn't present a typical namespace for its library so none of the obvious ideas worked.

Has anybody been able to get SUI working with 1.3 just using standard Blaze templates?

Answer 1

Maybe one of the following points may help, or give a hint for further inquiry:

1. Make sure the hole Semantic UI folder is at /client/lib/semantic-ui (no need to import anything elsewhere, just use the css classes).
2. Make sure the Atmosphere packages semantic:ui and flemay:less-autoprefixer are installed. So all .less files within the Semantic UI folder will be converted automatically.
3. If you need the JavaScript functionality of Semantic UI "Modules", like dropdowns, you need to initiate the functionality on page load. For example with $(".ui.dropdown").dropdown("initialize") or "refresh". Here you find some description of these so called "module behaviors". Behaviors are defined by $('.your.element').module('behavior name', argumentOne, argumentTwo).

Answer 2

If you are using a theme other than default, you might try setting the theme for the module you are trying to use to default in theme.config.less.import. It should look something like this:

/* Modules */
@accordion : 'material';
...
@dropdown  : 'default';
....