Ionic list with button and checkbox in same line

Question

I'm trying to have a ion-list with button and checkbox or radio at the end of the line. That's my code without checkbox/radio:

<button ion-item (click)="editItem(i, item)">
    <ion-avatar item-start>
        <img [src]="item.photo" />
    </ion-avatar>
    <h2>{{item.name}}</h2>
    <p>{{item.info}}</p>
</button>

It works and I can show any information about Item object.
If I add checkbox or radio my info disappear and the button click don't work (always checkbox change event trigger).

<button ion-item (click)="editItem(i, item)">
    <ion-avatar item-start>
        <img [src]="item.photo" />
    </ion-avatar>
    <h2>{{item.name}}</h2>
    <p>{{item.info}}</p>
    <ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
</button>

How can I have a button and checkbox in same row ?

Peter Haddad · Accepted Answer · 2018-12-08 23:30:05Z

1

You can use the grid system to put elements on the same row:

<ion-grid>
  <ion-row>
    <ion-col>
     <button ion-item (click)="editItem(i, item)">
      <ion-avatar item-start>
        <img [src]="item.photo" />
      </ion-avatar>
     <h2>{{item.name}}</h2>
     <p>{{item.info}}</p>
     </button>
    </ion-col>
    <ion-col>
      <ion-checkbox (ionChange)="fireEvent(i, $event)"></ion-checkbox>
   </ion-col>
  </ion-row>
 </ion-grid>

more info here:

https://ionicframework.com/docs/api/components/grid/Grid/

answered Dec 8, 2018 at 23:30

Peter Haddad

81.2k26 gold badges148 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic list with button and checkbox in same line

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related