Ion-checkbox inside ion-list :

#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.

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%;
  }
}
2 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.