Card header icon positioned to the right - ionic2

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

Answer 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

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

Answer 3

Use a div container and pull that div to right. HTML should look like below:
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span item-left>{{account.title}}</span>
<span item-right>
<div class="pull-right">
<ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon>
</div>
</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>
In CSS add following:
.pull-right {
float: right;
}

Answer 4

You could also use the popular flexbox module. Just add the following 2 CSS properties to the parent element.
<ion-card-header>
<div style="display: flex; justify-content: space-between;">
<h1>Left Content</h1>
<ion-icon name="more"></ion-icon>
</div>
...
</ion-card-header>
Here you can find another tutorial about flexbox with a good explanation and some nice, visual appealing examples.
The snippet above results in something like this:

Answer 5

<ion-card>
<ion-card-header>
<ion-card-subtitle color="primary">Subtitle</ion-card-subtitle>
<ion-card-title>
Title
<ion-icon color="primary" style="float:right" name="arrow-back"></ion-icon>
</ion-card-title>
</ion-card-header>
<ion-card-content>
This is some card content
</ion-card-content>
</ion-card>