Card header icon positioned to the right

Question

I am having a little challenge trying to re-position an icon in an ion-card header to the right. Check my code samples and pictures below.

this is my code

...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>      
<span item-left>{{account.title}}</span>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-card-header>
<ion-card-content>
  <h5>Bank: <b>{{account.bank}}</b></h5>
  <h5>Ac name: <b>{{account.acname}}</b></h5>
  <h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>

but the picture below shows what i would love to achieve

Solution 1

I finally figured out the ultimate solution. It is just adding style="float:right;"

...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
    <span style="color:blue">{{account.title}}</span>
    <ion-icon style="float: right;" (click)="takeAction(account.$key)" name="more">
  </ion-icon>
</ion-card-header>
<ion-card-content>
  <h5>Bank: <b>{{account.bank}}</b></h5>
  <h5>Ac name: <b>{{account.acname}}</b></h5>
  <h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>

Notice how I placed the ion-header contents into an ion-item element

Solution 2

You could try using ion-row and ion-col with col-{width}.

<ion-card-header>
<ion-row justify-content-between>
  <ion-col col-11>      
    <span item-left>{{account.title}}</span>
  </ion-col>
  <ion-col col-1>
    <span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
   </ion-col>
</ion-card-header>

They are both components of ion-grid which works similar to the grid layout of bootstrap.