Remove white space in ion-header after dismissing *ngIf template

Ionic Framework ionic-v3
1

On my Ionic 3 app page I’ve got an ion-header with and ion-searchbar inside it. Directly below the searchbar, I’m using an *ngIf directive to show an ion-grid containing the search term, if the search is active. It’s all working fine, and I’m electing to place the grid inside the header because I want the grid to always remain at the top of the screen and above the rest of the scrollable content in the page as the user scrolls results.

The problem is, when the *ngIf directive hides the grid (working correctly on native iOS device), the header still keeps the white space that the grid was taking up with it’s height. It may be worth saying this needs to be tested on native.

The code looks like this:

<ion-header>
    <ion-navbar>
        ...
    </ion-navbar>
    <ion-searchbar>
        ...
    </ion-searchbar>
    <ion-grid *ngIf="searchActive">
        ... only displayed when the search is active and when displayed, takes some extra height ...
    </ion-grid>
</ion-header>

I’ve searched a few forums now, and tried a couple of methods using dynamic CSS class to set the height of the grid to 1px when search is not active, etc… but so far the only way to reset the UI and remove that white space is to tap the searchbar again (which brings up the device keyboard) and then use the native cancel search button. That seems to reset the header to how it appears before the grid is displayed.

Any suggestions for how to neatly clear that vertical space on directive change?

Thanks in advance!