ons-checkbox not appearing
I started an empty test project (Onsen UI V2 Angular 1 Minimum) and my code looks like this:
<ons-page ng-controller="AppController as page"> <ons-toolbar> <div class="center">Introduction</div> </ons-toolbar> <ons-list> <ons-list-item tappable> <label class="left"> <ons-checkbox input-id="check-2" ng-model="page.bananas"></ons-checkbox> </label> <label for="check-2" class="center">Bananas</label> <label class="right"> <ons-switch input-id="check-2" ng-model="page.bananas"></ons-checkbox> </label> </ons-list-item> </ons-list> </ons-page>
Nothing fanciful. Just a list within a
ons-pagewith 3 columns: left, center and right.
On the left, a
In the center, a caption label static text.
On the right, a
Now when I
monaca preview, the
ons-checkboxdoesn’t appear, for both iOS and Material design. The
What am I missing?
ons-checkboxsyntax was introduced in version
2.4.0version of Onsen UI. You are most likely using an older version and probably getting errors in your console. Can you check if that’s the case?
No error in console.
I did a
monaca version. It says: 2.2.1. (meaning Onsen version 2.2.1 is installed? Or the monaca version?)
monaca infoas below:
Node version: v6.10.2 Cordova version: 5.4.1
Oh wait a minute. I checked the package.json inside the
"name": "onsenui", "version": "2.3.2"
Seems to me the template bundles 2.3.2 by default?
2.2.1is just the Monaca CLI version you’re using. For the Onsen UI one on that project you can check
www/lib/onsenui/package.json. In any case I just tried and even the latest CLI version only fetches
2.3.2so the templates are not updated yet. If you really want to use Onsen UI
2.4.0with Monaca you can either wait for the update or change your
index.htmlfile’s head to fetch from CDN. Or you can also download the 2.4.0 version and add it to the lib instead of the current one.
@wetfeet exactly, so you need to bypass that into the current version if you want. Or else just keep the
<ons-input type="checkbox">syntax if it’s not bothersome for that one project.
@misterjunio OK Thank you for confirming.
Originally, I thought
ons-checkboxis an old feature that has always been there, since it is already advertised and demoed on the tutorial docs. Didn’t know it is so new.