Ion-checkbox in Ionic 2


#1

In ionic1 I had the following code (minus most of the styling) to generate a scrollable list of things that are checkbox inputs:

<ion-scroll>
     <div class="row" style="flex-wrap:wrap">
         <div class="col" ng-repeat="thing in ::things"> <ion-checkbox>{{::thing}}</ion-checkbox> </div>
      </div>
</ion-scroll>

I believe a straight port of this ionic1 syntax into ionic2 syntax would be:

<ion-scroll scrollY="true">
      <ion-row style="flex-wrap:wrap">
         <ion-col *ngFor="#thing of things"><ion-checkbox>{{thing}}</ion-checkbox></ion-col>
      </ion-row>
 </ion-scroll>

However, {{thing}} is not being recognised/displayed, nor is any text ‘label’ I tested instead e.g.

<ion-checkbox>TEST</ion-checkbox>

doesn’t display ‘TEST’.

OK, so the doco suggests I may need to use an <ion-label> even though I am not nesting the <ion-checkbox> in an <ion-list> (for <ion-checkbox> docs say " It can be placed in an ion-item or used as a stand-alone checkbox" (bold emphasis mine). No examples in the docs how it can be used stand-alone…

So I tried the following:

<ion-scroll scrollY="true">
      <ion-row style="flex-wrap:wrap">
         <ion-col *ngFor="#thing of things"><ion-checkbox></ion-checkbox><ion-label>{{thing}}</ion-label></ion-col>
      </ion-row>
</ion-scroll>

{{thing}} is now showing however it is displayed underneath the checkbox rather than alongside it as was the case in ionic 1 syntax. i.e. <ion-label> is like a new div or span element in that it doesn’t float right by default. The <ion-label> is also bringing with it lots of css which I have toggled off in Chrome Developer but haven’t been able to get the display correct yet even after trying a float:left on the <ion-checkbox> and a float:right on the <ion-label>.

Any suggestions? Can I reproduce my ionic1 text labelled checkboxes without using <ion-label> in ionic2?


#2

This is working OK for me:

<ion-list>
    <ion-item *ngFor="#item of items">
      <ion-label>{{item}}</ion-label>
      <ion-checkbox (change)="change($event, item)"></ion-checkbox>
    </ion-item>
  </ion-list>

#3

Thanks but wrapping my flexible row/cols in <ion-list> did not fix my situation. Ideally using <ion-item> and <ion-list> is not something I’d need to use for my situation (no issues with my comparable syntax in ionic1!). I’ll keep trying various combinations in the interim though…


#4

Why not using the syntax provided in the docs over here?


#5

I am using a flexible ‘grid’ of 100+ ‘things’ which displayed nicely three or more to a row (depending on their text width; wraps to next row otherwise) rather than 1 thing per row.


#6

Could you provide a small demo of what you’re trying to do?

http://codepen.io/tlancina/pen/EPBdVE/


#7

I’m curious as well, a Pen should definitely help :slight_smile:


#8

What I’m trying to do can be seen by putting the five lines (or three if you want to omit the vertical scroll of <ion-scroll>) of ionic1 code in my top post into an ionic1 project, substituting the array of things, and adding styling to taste. It’s just a flexible grid of labelled checkboxes.

However the crux of what I’m trying to do is best demonstrated by the following which is more generically useful to others rather than my particular use case.

In ionic 1, writing the following:

<div>
      <ion-checkbox>Example ionic1 checkbox in any div</ion-checkbox>
 </div>

gives

However in ionic2 using

 <div>
          <ion-checkbox>Example ionic2 checkbox in any div</ion-checkbox>
 </div>

gives a checkbox without a label:

Instead using

<div>
        <ion-checkbox><ion-label>Example ionic2 checkbox in any div</ion-label></ion-checkbox>
</div>

gives same result as above (checkbox without a label). Using:

<div>
        <ion-label>Example ionic2 checkbox in any div</ion-label>
        <ion-checkbox></ion-checkbox>
 </div>

gives

and using

 <div>
        <ion-checkbox></ion-checkbox>
        <ion-label>Example ionic2 checkbox in any div</ion-label>
    </div>

gives

The point is that a checkbox should not need to be coupled with (dependent on) an <ion-list> and <ion-item> in order to make it work. A checkbox should be able to be used stand-alone (as suggested in the ionic 2 docs), as was the case in ionic1. It will thus be able to be more readily usable for any use case.


#9

So this is the best part of the newer markup syntax, you have both the layout you want, as well as the styling.


#10

Thanks. I tried adding the ion-item to the ion-col for my use case:

<ion-row style="flex-wrap:wrap">
         <ion-col ion-item *ngFor="#thing of things"><ion-label>{{thing}}</ion-label><ion-checkbox></ion-checkbox></ion-col>
</ion-row>

There is nothing at all visible in the results (i.e. not even the checkbox button) but in Chrome Inspector if I hover over where the elements should be I can see that the elements are being rendered in the correct place (although not to the expected width based on my labels), but are not visible.

I’m going to revert to a standard <ion-list><ion-item> ‘1 checkbox per row’ for prototyping and tackle this again later as it’s probably some styling overrides I need to apply (there are heaps of classes introduced like item-cover etc).

For general use, I suggest that the fact you can combine ion tags like <ion-col ion-item> in ionic 2 should be documented (e.g. which ones, how many at once etc), and perhaps a two row, 3-checkbox per row example similar to your codepen added as an example in the docs to showcase ‘standalone use’. :slight_smile: