CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
TheUnreal
TheUnreal

Reputation: 24472

Ionic 2 multiple ion-item in a row

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

Since I'm using Bootstrap, I tried to do:

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

Upvotes: 9

Views: 30339

Answers (2)

sebaferreras
sebaferreras

Reputation: 44659

You can manually set the width of each column by using the Explicit Column Percentage Attributes like this:

<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 will resize to fit additional columns, like this:

<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 Explicit Column Percentage Attributes here.

UPDATE

As of 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>

So the width-25 attribute needs to be replaced by col-3.

Upvotes: 19

Suraj Rao
Suraj Rao

Reputation: 29614

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 dont really need bootstrap for this. Check this tutorial and here

Upvotes: 0

Related Questions