Tabs app content does not resize


#1

Hello community :slight_smile:

I’ve been reading all over and I can’t figure this out.

I generated a Tabs app which works perfectly well, but I can’t get the content to be sized properly with the bottom tabs. (the Tabs overlap the end of the content)

home.html

<ion-header>...</ion-header>
<ion-content padding>...</ion-content>

home.ts

  @ViewChild(Content) content: Content;
  constructor(...) { }

  ionViewDidEnter() {
    this.content.resize(); //no effect
    console.log("this.content.contentTop",this.content.contentTop) //56
    console.log("this.content.contentBottom",this.content.contentBottom) //0
  }

app.component.ts
Root is first the Login page, then after login Root is the Tabs page.

@ViewChild(Content) content: Content;
constructor(...){
  appState.subscribe(status => {
      switch (status) {
        case "connected":
          this.rootPage = "login";
          break;
        case "loggedIn":
          this.rootPage = "tabs";
          // tried content.resize() here, didn't work
          break;
      }
  }
}
ionViewDidEnter() {
  this.content.resize(); // tried content.resize() here, didn't work
}

tabs.html

<ion-tabs
  [tabsPlacement]="isDesktop && 'top'"
  [tabsLayout]="isDesktop && 'icon-start'"
>
  <ion-tab [root]="tab0Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="Page1" tabIcon="icon"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Page2" tabIcon="icon"></ion-tab>
  <ion-tab [show]="isDesktop" class="tab-spacer" enabled="false"></ion-tab>
  <ion-tab [root]="tab3Root"  tabTitle="Page3"  tabIcon="icon"></ion-tab>
  <ion-tab  [show]="isAdmin" [root]="tab4Root"  tabTitle="Page4"  tabIcon="icon"></ion-tab>
</ion-tabs>

tabs.ts

  @ViewChild(Content) content: Content; // doesn't work: tab content is not available here
  isDesktop: boolean;
  isAdmin: boolean = true;
  tab0Root: any = "home";
  tab1Root: any = "page1";
  tab2Root: any = "page2";
  tab3Root: any = "page3";
  tab4Root: any = null;

  constructor(...) {
    this.isDesktop = !platform.is("mobile");
    if (isAdmin) this.tab4Root = "page4";
  }

Any idea?