Using showWhen to hide ion-header

Ionic Framework ionic-v3
1

I am trying to hide an using showWhen=“portrait” in order to have the header bar at the top only visible when the mobile device is in portrait mode and to hide it when the device in landscape orientation.
However, the rest of the text on the screen is not rearranged to fill the blank space left by the header bar.

Is it not a good idea (acceptable) to be able to hide the header bar on orientation change or is this an issue I should raise an issue on the ionic2 repository?

Here is a plunker even though it is hard to see the issue here as I was unable to change screen orientation when using plunker:

To preproduce otherwise just create a new application, add showWhen=“portrait” and make sure there is some text below the header. Then run the app and change screen orientation to landscape.

Thanks in advance for any help,

Edit: I have just seen this issue https://github.com/driftyco/ionic/issues/7706 so I should apparently be calling a resize() function. I don’t however see any event being thrown by showWhen that would allow me to call the function on screen orientation change. Any ideas?

2

Probably a bad idea, but I’m calling resize from template

In my case, resize function is called from a ion-content that is hided too.

Without the resize function, when the ion-content is not hided, it is loaded over the header place.
With resize function, the ion-content goes to right place, but header still doesn’t show up (I need figure out how to solve this)

I hope this help you.

app.ts

  @ViewChild('mycontent') content: Content;
  
  resize()
  {
    if(this.content)
    {
      this.content.resize();
      console.debug("content resize", content)
    }
  }

app.html

<ion-header *ngIf="auth.authenticated()">
    <ion-navbar  >
        <ion-title>home</ion-title>
    </ion-navbar>
</ion-header>
<ion-content *ngIf="auth.authenticated()" #mycontent>
    {{resize()}}
    <button (click)="logout()">
        LOGOUT
    </button>
</ion-content>
<ion-content *ngIf="!auth.authenticated()">
      <!-- auth0 locker -->
</ion-content>
3

It seems that my ionic2/angular2 skills are a bit lacking. Would {{cont.resize()}} be called any time that an update is done to #mycontent or only when #mycontent is being added to the html (through the *ngIf directive) or would resize() be called all of the time?

4

In my tests, it’s called at any interaction to the view, but only while #mycontent is added to the html (ngIf = true).

5

In your case, you can attach a subscribe to cordova event!

Here is a plnkr, but I didn’t figure out how to import ionic-native in this plnkr, so the functions are commented

Note: You can test landscape mode, just resizing the live preview window, but I don’t know if this will work with cordova

6

guys did you try the platform
see the below link

1 Like