Ion-searchbar between two buttons inside of ion-toolbar

Ionic Framework ionic-v3
1

I’m creating a modal to search items and I want ion-searchbar are on ion-toolbar with two buttons: cancel to go back without parameters (on left side) and add to add a new item and send back a parameter (right side).
I did the nex html:

<ion-header>
	<ion-toolbar color='primary'>
		<ion-buttons start>
			<button ion-button icon-only (click)='onCancel()'>
				<ion-icon name="close"></ion-icon>
			</button>
		</ion-buttons>
		<ion-searchbar (input)="onSearchInput()"></ion-searchbar>
		<ion-buttons end>
			<button ion-button icon-only (click)='onDismiss()'>
				<ion-icon name="add"></ion-icon>
			</button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>

With this I would expect to get the desired result, but no. Actually I’m getting this:
image

I’m looking for move cancel button (X) to left side.
Another thing, how change ion-searchbar’s placeholder to spanish?

1 Like
2

use left instead of start and right instead of end. Because start end behaves differently on Android then you might expect. You can read about those properties over here in the documentation: http://ionicframework.com/docs/api/components/toolbar/Toolbar/. For the placeholder, just add placeholder=“mySpanishSentence” to the ion-searchbar. That should work :slight_smile:

4 Likes
3

I really, really appreciate your help:
image

1 Like