Button inside headers

Ionic Framework ionic-v3
1

I tried to place a button inside an header (e.g. card-header or list-header). I used for example the following code:

<ion-card-header>
    Text
    <ion-buttons end>
         <button outline>
             <ion-icon name="add"></ion-icon>
         </button>
    </ion-buttons>        
</ion-card-header>

The problem is, that the height of the header is crowing and the button isn’t placed on the same height as the text. The position of the button is lower than the text.

How can I place the button on the same height as the text?

2

Try this:

`

heading

`

Or Something like this:

`

Heading2

`
1 Like
3

Thank you, this is working for me.

4

What? What did you actually do…? The answer in post 2 is meaningless to me?

5

I don’t know, why this answer is like it is now. Here’s an example of my actual code:

<ion-card-header>
  <ion-item class="header" no-lines>
    <span item-start>Text</span>
    <button item-end ion-button color="danger">
      <ion-icon name="example"></ion-icon>
    </button>
  </ion-item>
</ion-card-header>
1 Like