Hello community
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?