Ion-checkbox inside ion-list :

Ionic Framework ionic-v3
1

Hello there,

I would like to create a list of ion-items, containing

  • a checkbox (to select group membership)
  • a label
  • a button on the right to go to another page

I’m using the following code snippet :

<ion-list>
    <ion-item *ngFor="let component of (candidates | async)" [ngSwitch]="component.type" detail-push>
      <ion-checkbox dark [checked]="group.contains(component)" (ionChange)="toggleComponent($event, component)" item-left></ion-checkbox>
      <ion-label>{{ component.name }}</ion-label>
      <span (click)="showComponent(component)" item-right>
        <ion-icon name="information-circle"></ion-icon>
      </span>
    </ion-item>
  </ion-list>

It renders nicely, however the checkbox is rendered as a button that takes the whole width of the list item.

image
Pasted image373×983 59.4 KB

So wherever you click or touch, it will trigger the checkbox change event. It is impossible to trigger the click event on the ion-icon on the right.

Could anyone tell me what’s wrong with my approach ?

Thank you,

Bart

1 Like
2

Hi, do you resolved it?

3

I used <ion-grid> for this :
something like this :

<ion-grid>
        <ion-row *ngFor="let component of (candidates | async)">
          <ion-col width-10>
            <ion-checkbox dark 
                                  [checked]="group.contains(component)" 
                                  (ionChange)="toggleComponent($event, component)">
            </ion-checkbox>
          </ion-col>
          <ion-col width-33>
            <ion-item no-lines (click)="showComponent(component)">
              {{component.name}}
            </ion-item>
          </ion-col>
          <ion-col>
            <ion-item no-lines>
              {{userExtender.extender.name}}
            </ion-item>
          </ion-col>
          <ion-col width-10>
            <button ion-item round
                       (click)="showComponent(component)">
              <ion-icon name="information-circle"></ion-icon>
            </button>
          </ion-col>
        </ion-row>
      </ion-grid>
1 Like
4

I solved a similar case with a CSS hack. The idea is not to render the checkbox button as a full width element.
It’s not great but it does the job.

ion-checkbox{
  button.item-cover{
    left: initial;
    right: 0;
    width: 15%;
  }
}
3 Likes
5

HTML:

<ion-list>
    <ion-item text-wrap *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 16, 17, 18, 19, 20]">
        <ion-label>
            Item {{ item }} 
            <button class="item-cover disable-hover" ion-button="item-cover" type="button" (click)="edit()">
                <span class="button-inner"></span>
                <div class="button-effect"></div>
            </button>
        </ion-label>
        <ion-checkbox color="royal" checked="false"></ion-checkbox>
    </ion-item>
</ion-list>

CSS:

.item-checkbox{
    ion-checkbox{
        button.item-cover{
            width: 15%;
        }
    }

    ion-label{
        button.item-cover{
            width: 85%;
            right: 0;
            left: auto;
        }
    }
}
6

Same I was thinking. Tyn, Good Job.

8

I changed the “z-index” icon.