Card header icon positioned to the right

user_8069271 0
Viewed 20154

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>

Click to view picture for the above code

but the picture below shows what i would love to achieve

Click to view picture for my expectation

ionic2
5 Answers

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:

enter image description here

user_77275830 
<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>
user_22926250
Related