Button in SearchBar [RESOLVED]

Ionic Framework ionic-v3
1

Hi !

I would like to put a button with an icon in a search bar.

For the moment, i do a toolbar with the search bar and the button.

But the problem is I can’t put the button in the searchbar, by default it is separate at the right.

Sorry for my english and thanks for your help !

2

hello @Quiesan
did not get you what you exactly want to say.
so please explain in brief what you want to do.

search bar in header + button
but which kind of button ?

if you have any demo link for refer then please provide it here.
thanks.

3

Thanks for your help.

I would like to do the srachBar like this : https://play.google.com/store/apps/details?id=com.lafourchette.lafourchette&hl=fr

I can’t put the button “locate” at the right of the searchbar…

4

@Quiesan
may be this demo helpful to you

<ion-toolbar>
    <ion-row >
      <ion-col>
        <ion-searchbar [(ngModel)]="myInput" [showCancelButton]="shouldShowCancel" (ionCancel)="onCancel($event)"> </ion-searchbar>
      </ion-col>
        <ion-col col-2>
          <ion-icon ion-item name="map"></ion-icon>
        </ion-col>
    </ion-row>
  </ion-toolbar>

but if you want exactly like this then you go through CSS and put button over it,

5

With row and col that does not work.

We don’t have a method for just put a button directly in search bar ?

Thanks @spanchal

6

@Quiesan
no we don’t have any method like this,
which you expected. :slight_smile:
thanks.

7

any updates on this?

8

sorry,
i have no update about it