Icon button in card header don't float right and not vertical centered

Ionic Framework ionic-v3
1

Hello,

I try to add to my card header a icon button. I want that the button is on the right side of the screen and have the same vertical position like the header.

In the moment, the icon is directly beside the header text, is not vertical centered (the icon top is the same as the text top, but the icon is higher than the text).

This is my code:

  <ion-card>
    <ion-card-header>
      Indikationen
      <button ion-button icon-only item-right clear>
        <ion-icon name="md-create"></ion-icon>
      </button>      
    </ion-card-header>
    <ion-card-content [innerHTML]="medi['indi']">
    </ion-card-content>
  </ion-card>
2

You can wrap it into and it works like this:

image
Bildschirmfoto 2016-12-17 um 08.57.45.png702×210 6.43 KB

Is that what you want? Here the code:

<ion-card-header>
      <ion-item>
        Indikationen
        <button ion-button icon-only item-right clear>
        <ion-icon name="md-create"></ion-icon>
      </button>
      </ion-item>
</ion-card-header>

The ion-icons are a font, so you can resize them by changing the font-size of the ion-icon tag with css

5 Likes