Dynamic ion-toolbar with searchbar

Ionic Framework ionic-v3
1

Hello,

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:

image

That is the code of my ion-header:

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

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

image

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

2

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

3

I fixed that problem by open a seperate search page

4

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,

3 Likes
5

Working perfectly with resize! Thanks @LoLStats