Can you put a button and title beside each other in an ion-header?

Ionic Framework ionic-v3
1

This mark up gives an unexpected result. I expected that I could have a title with buttons on the left and right of the title, much like having the navigation button with title.

 <ion-header>
    <ion-navbar>
        <button ion-button clear>
            <ion-icon name="close" (click)="dismiss()"></ion-icon>
        </button>
        <ion-title>Record</ion-title>
    </ion-navbar>
</ion-header>

image
image.png531Ă—1016 20.2 KB

2

you need to wrap button tag inside ion-buttons, for example

image

the end attribute in ion-buttons mean the button will be on right side of title…use start if you want it on left side of title

3

This works!! Except it never puts the buttons on the left hand side :expressionless:

This

<ion-header>
    <ion-toolbar>
        <ion-buttons start>
            <button ion-button clear icon-only (click)="dismiss()">
                <ion-icon name="close"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Recipients</ion-title>
    </ion-toolbar>
</ion-header>

Makes this

image

I guess I could live with this. Thanks.

4

then you can try left or right attribute instead of start end…because i using both old and new version in different pc so sometime it confuse me a bit too

1 Like
5

Yup this worked. Thank you!