Checkbox style of flatui in Meteor

Recently I added this free flat-ui library to my Meteor app. It is quite easy to integrate into the app, but I got one problem about the checkbox style so far.

At the beginning, I just downloaded the latest flatui package , got rid of the html files and put them into the client folder of my Meteor app. It worked fine for most of the styles but the checkbox. The checkbox remained the same as no flatui or bootstrap css style. After I did some research, I fix this issue by the following steps.

  1. Don't use the downloaded FlatUI from the website or github if you use Meteor. Just use, the Meteor way to add third party package.

  2. Then add the radiocheck.js from the downloaed FlatUI package (FlatUI/js/radiocheck.js) to you Meteor app's client folder.

  3. Put a label tag with the class "checkbox" with the checkbox type of input. You can find examples from the downloaded FlatUI package's doc folder. Don't forget to use $(':checkbox').radiocheck(); in your js file.

Then you will see the beautify FlatUI checkbox on your page.


But if you use the checkbox in Angular ngRepeat, you have to wait for the ngRepeat finished the rendering then call


After this, you will get the FlatUI effect in the ngRepeat loop.
About how to get the ngRepeat finish rendering event, here is a good article about it: