Ionic 2 multiple ionic objects in a row

Question

I want to show 4 ion-items in my ion-list in a line.

Since I use Bootstrap, I tried:

 <button class="col-sm-3" ion-item *ngFor="let player of players"> <ion-avatar item-left> <img [src]="user.photoURL"> </ion-avatar> {{ user.name }} </button> 

but it didn’t work.

Answer 1

You can manually set the width of each column using the Percent Explicit Column attributes, such as:

 <ion-row> <ion-col width-25> <!-- item 1 --> </ion-col> <ion-col width-25> <!-- item 2 --> </ion-col> <ion-col width-25> <!-- item 3 --> </ion-col> <ion-col width-25> <!-- item 4 --> </ion-col> </ion-row> 

Or just add ion-col dynamically and they will expand to fill their row and resize to fit additional columns, for example:

 <ion-row> <ion-col *ngFor="let player of players"> <ion-item> <ion-avatar item-left> <img [src]="user.photoURL"> </ion-avatar> {{ user.name }} </ion-item> </ion-col> </ion-row> 

You can find more information about the Percent Explicit Column attributes here .

UPDATE

Starting with Ionic 3.0.0 , the way to achieve the same with the new grid would be something like this:

 <ion-row> <ion-col col-3> <!-- item 1 --> </ion-col> <ion-col col-3> <!-- item 2 --> </ion-col> <ion-col col-3> <!-- item 3 --> </ion-col> <ion-col col-3> <!-- item 4 --> </ion-col> </ion-row> 

Therefore, the attribute width-25 must be replaced with col-3 .

Answer 2

Try:

 <ion-item> <ion-row> <ion-col *ngFor="let player of players"> <ion-avatar item-left> <img [src]="user.photoURL"> </ion-avatar> {{ user.name }} </ion-col> </ion-row> </ion-item> 

You do not need a bootstrap for this. Check out this tutorial here too.