CODEWITHSUNDEEP
ionic-frameworkionic3
enfix
enfix

Reputation: 6970

Ionic list with button and checkbox in same line

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 ?

Upvotes: 1

Views: 2067

Answers (1)

Peter Haddad
Peter Haddad

Reputation: 80914

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/

Upvotes: 1

Related Questions