CODEWITHSUNDEEP
ionic-frameworkionic4
Rajesh Yadav
Rajesh Yadav

Reputation: 149

fix ion-search bar postion at top

In my ionic 4 app , I have a search or filter the users for list using ion-searchbar . but if I scroll the list ion-searchbar also moving with list. can we fix the ion-searchbar postion fix at top with out writting any css(do we have any in built property).

Upvotes: 0

Views: 2025

Answers (2)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

You could achieve that using list item divider if it suits your use case:

<ion-list>
    <ion-item-divider sticky style="border: 0">
      <ion-searchbar></ion-searchbar>
    </ion-item-divider>
    <ion-item *ngFor="let item of [0,1,2,3,4,5,6,7,8 ,9,10,11]">I am item #{{item}}</ion-item>
</ion-list>

In short this will keep your search bar in the view while the list can be scrolled across.

Another way (and I think more proper) is to add it to header or footer.

Upvotes: 2

MohammedAli
MohammedAli

Reputation: 2519

you can put into a header like.

<ion-header>
 <ion-searchbar></ion-searchbar>
</ion-header>

Upvotes: 4

Related Questions