CODEWITHSUNDEEP
ionic2
Emeka Obianom
Emeka Obianom

Reputation: 1794

Card header icon positioned to the right

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

Upvotes: 7

Views: 22254

Answers (5)

Joe Naber
Joe Naber

Reputation: 537

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

Upvotes: 1

Yannic Hamann
Yannic Hamann

Reputation: 5205

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

Upvotes: 0

Emeka Obianom
Emeka Obianom

Reputation: 1794

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

Upvotes: 13

Suraj Rao
Suraj Rao

Reputation: 29614

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.

Upvotes: 1

Yuvraj Patil
Yuvraj Patil

Reputation: 8736

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;
}

Upvotes: 0

Related Questions