Ionic-framework: Toggling an ion-searchbar in the toolbar does not resize ion-content appropriately

[kelvindart]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
If I have a page consisting of an ion-header which contains an ion-navbar and an ion-toolbar with the toolbar having a ion-searchbar and an *ngIf on it to toggle whether the searchbar is displaying or not, and an ion-conent. When I toggle the toolbar to on/off, the ion-content below it does not rerender/resize and this results in the appearance of the ion-searchbar hovering over the ion-content.

Better illustrated here:

If I have the above rendered without an *ngIf (i.e. where the ion-searchbar is always displaying), then the page is rendered as expected with the ion-content appearing beneath the ion-navbar and ion-toolbar.

Expected behavior:
For the ion-content to be re-rendered beneath the ion-searchbar when it is toggled to show after being hidden, and for the ion-content to be pushed down to accommodate the expanded ion-header.

Steps to reproduce:
Please see the Plunk here: http://plnkr.co/edit/Tc5T80Qcef0LyroYzy4M?p=preview

Tap the search button in the top-right, and notice it appear above the ion-list.

Related code:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="toggleSearchbar()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

  <ion-toolbar *ngIf="showSearchbar">
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</ion-header>

Other information:
I have attempted the *ngIf on both the ion-toolbar and ion-searchbar which resulted in the same output.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.5.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Hey, thanks for opening an issue with us! I have made a plunker here which shows the correct way to do this. Whenever doing something that should cause the content to resize (like dynamically opening a searchbar in your app) you must call the resize method on the component instance of the ion-content in your app. This tells the content to re-compute its dimensions to match the new content height.

[kelvindart]

Hey @jgw96 - that's perfect 🙂 - thanks so much for the how-to.

[KeaganFouche]

Thank you, it worked for me as well! :)

[jaufgang]

@jgw96 , needing to call the resize method in this way seems like a workaround to a bug rather than how it should work by design.

Is there any way the framework could do this automatically? Possibly by detecting when headers or footer height changes and calling resize automatically?

Or better yet, If Ionic headers and footers were to be re-implemented using flexboxes instead of the current complicated markup and css, this problem would go away automatically and the page markup would be greatly simplified. Has there been any discussion within the Ionic team of re-implementing headers and footers using flexboxes?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.