Ion-toolbar hide and show issue with Chrome iphone

Ionic Framework ionic-v3
1

I took Ionic example and add a *ngIf to display the toolbar.

<ion-header >
  <ion-toolbar *ngIf="show">
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="create"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment>
      <ion-segment-button value="new">
        New
      </ion-segment-button>
      <ion-segment-button value="hot">
        Hot
      </ion-segment-button>
    </ion-segment>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

When simulating on Chrome and with Galaxy S5, I can show and hide the toolbar. When using iphone 5 or 6, the toolbar never show.

Any clue?

2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

3

@Sujan12,

Thanks for the info, but I am working on Win10 and no access to a real iphone.

4

Maybe the content needs resizing after adding/hiding the toolbar to the DOM? The content docs tells us:

Resize(): Tell the content to recalculate its dimensions. This should be called after dynamically adding/removing headers, footers, or tabs.

I think that’s more for margins and stuff, but you never know. Did you also refresh after changing to iPhone in the inspector? Sometimes it needs a redraw. Anyways, if I were you I would definitely check it out on a real device somehow (Ionic view?) because you don’t know if it’s really a serious issue or just a display bug in the browser.

5

Which is it? How do you know it doesn’t work on iPhone? How do you want to fix it if you don’t have an iPhone to test if you fixed it?

6

I suspect he’s switching display mode in his dev tools. Otherwise this is somewhat impossible :slight_smile: :sweat_smile:

7

It’s true, I am using Chrome devtool and switch between Galaxy and iphone

8

Ah ok.

Did you reload the site after switching the user agent / simulated device?

9

After I reboot my computer, the hide and show worked!

Now, any idea how to make the ion-toolbar push the ion-list to the bottom when it shows up? Now, it hides the first item.

Thanks