Dynamic ion-toolbar with searchbar


we have a page with an icon of a search icon inside a navbar, once the user clicks on this icon, the search bar should show up and push the content down.

That is the layout:


That is the code of my ion-header:

            <ion-icon name="search" (click)="searchActive=!searchActive" item-right></ion-icon>
            <ion-icon name="more" md="ios-more" item-right></ion-icon>
    <ion-toolbar *ngIf="searchActive">

This works good, but then the searchbar overlaps the content which should be pushed down:


Iā€™m pretty sure this could be made programatically, but perhabs a easier way of achieving this?

I have the same issue. Did you find a solution?

I fixed that problem by open a seperate search page

Have a look at this issue on github. When showing your <search-bar> you should also call the contents resize() function in order to have it recalculate its dimensions,


Working perfectly with resize! Thanks @LoLStats