Monday, 7 January 2019

Vertically align Ionic cards with Angular directives

I'm trying to do a simple card collection using Ionic framework.

I'm using SpaceX API to populate the cards. My code include angular directives. I built this:

<ion-grid>
  <ion-row>
    <ion-col col-4>
      <ion-card *ngFor="let launch of list_launches">
        <ion-card-header>
          
        </ion-card-header>
        <ion-card-content>
          <ion-thumbnail item-start>
            <img src="">
          </ion-thumbnail>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

this *ngFor="let launch of list_launches" is used to get some atributes from object list_launches.

My Solution

I found this solution:

<ion-row>
    <ion-col col-4>
      Left
    </ion-col>
    <ion-col col-4>
      Middle
    </ion-col>
    <ion-col col-4>
      Right
    </ion-col>
 </ion-row>

but this does not work properlly when i use the *ngfor parameter. Want to vertically align this Ionic cards .



from Vertically align Ionic cards with Angular directives

No comments:

Post a Comment