Ion-tabs disappears when using push. - Ionic

Ionic Framework ionic-v3
1

how do i show the ion-nav in the next push/ page or when i set new root?

2

Can you please share what you have for code?

Weā€™re not really able to help if we donā€™t have any code.

3

hi @mhartington, i want my category details to have the tab also, but ion-tabs disappear when it pushes to the category details page.

category page: (category.ts)

   import {Page, NavController, NavParams} from 'ionic-angular';
   import {CategoryDetailsPage} from '../category-details/category-details';
   import {Woocommerce} from '../../providers/woocommerce/woocommerce';
   import {MytabsPage} from '../mytabs/mytabs';

   @Page({
            templateUrl: 'build/pages/category/category.html',
            providers: [Woocommerce]
     })
     export class CategoryPage {
            constructor(
                 nav: NavController,
                 navParams: NavParams,
                 woo: Woocommerce){
                      this.nav = nav;
                      this.woo = woo;
              } 
            categoryDetails(page){
                     this.nav.push(CategoryDetailsPage, {
                         item: page
                     });
            }
     }

Category details page (category-details.ts)

   import {Page, NavController, NavParams} from 'ionic-angular';
   import {ProductDetailPage} from '../product-detail/product-detail';
   import {Woocommerce} from '../../providers/woocommerce/woocommerce';
   import {MytabsPage} from '../mytabs/mytabs';
   @Page({
      templateUrl: 'build/pages/category-details/category-details.html',
      providers: [Woocommerce]
    })

   export class CategoryDetailsPage {
             categorydata:any;

             constructor(  
                 nav: NavController,
                 navParams: NavParams,
                 woo: Woocommerce ){
                       this.woo = woo;
                       this.nav = nav;
                       this.navParams = navParams;
                       this.selectedItem = navParams.get('tabIndex');
                       this.categorydata = navParams.get('item');
                       this.catalogname = this.categorydata.name;
               }
   }

mytabs page (mytabs.ts)

 import {Page,NavParams} from 'ionic-angular';
 import {MyaccountPage} from '../myaccount/myaccount';
 import {HomePage} from '../home/home';
 import {CartPage} from '../cart/cart';
 import {CategoryPage} from '../category/category';
 import {CategoryDetailsPage} from '../category-details/category-details';
 import {ProductDetailPage} from '../product-detail/product-detail';
 @Page({
      templateUrl: 'build/pages/mytabs/mytabs.html'
 })

export class MytabsPage {

   tab1Root: any = MyaccountPage;
   tab2Root: any = HomePage;
   tab3Root: any = CartPage;
   tab4Root: any = CategoryPage;
   tab5Root: any = CategoryDetailsPage;
   mySelectedIndex: number;

   constructor(public navParams: NavParams) {
       this.mySelectedIndex = navParams.data.tabIndex || 0;
       //console.log( this.mySelectedIndex );
       this.tab1Root = MyaccountPage;
       this.tab2Root = HomePage;
       this.tab3Root = CartPage;
       this.tab4Root = CategoryPage;
       this.tab5Root = CategoryDetailsPage;
     }

   }

mytabs.html

    <ion-tabs class="myTabs" [selectedIndex]="mySelectedIndex">
      <ion-tab [root]="tab1Root" tabTitle="Me" tabIcon="ios-contact"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Home" tabIcon="ios-home"></ion-tab>
      <ion-tab [root]="tab3Root" tabTitle="Cart" tabIcon="ios-cart"></ion-tab>
      <ion-tab [root]="tab4Root" tabTitle="Category"  tabIcon="list"></ion-tab>
    </ion-tabs>
4

I just changed from Beta 4 to Beta 6 and now I am facing the same problem. Changing to a tab detail page via nav.push makes the tabbar disappear, returning to the the tab main page makes the tabbar being shown again.

5

I had the same issue and all you need to do is add the ā€œtabSubPagesā€ setting to the config of your app.

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {
    mode: "ios",
    tabSubPages: false
})

Iā€™m also forcing the app to be in ios mode which was something else that changed from beta 5 to 6. When viewing in Chrome, it was using the Material Design mode as itā€™s default.

1 Like
6

Thank You for your helpful answer. This was the missing information, now the tabbar is there again :slight_smile:

7

can you also tell any way how to hide the tabs when we scroll downā€¦?

8

My tabs/pages are using the same pattern as @JosephMendez. I applied the solution as best I understand it as described herein and from the config section in the Ionic docs: https://ionicframework.com/docs/v2/api/config/Config/

To be clear, in my app.module.ts:

@NgModule({
ā€¦
imports: [
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages:false,
swipeBackEnabled: true
})
],
ā€¦
})

Still, when I go to a details (child) page, the tabs disappear. Itā€™s been several months and Ionic2 has changed so I think something has been lost since then. The example from May shows @App for placement where app.module.ts now has @NgModule (I think these are the same?!?) and the pages/components were @Page and are now @Component.

How do I keep the tabs page available on child screens. Thank you.

1 Like
9

Just in case this may help you, I had exactly the same problem (tabs disappearing when changing page) on Ionic 2 (Release).
I found that my css for the tabs in variables.scss were incorrect. Once changing them to the proper values stated in https://ionicframework.com/docs/v2/api/components/tabs/Tabs/ it worked fine. I didnā€™t have to set the ā€˜tabsHideOnSubPagesā€™ neither.

10

You made my day! It works for my codes.

11

@dbertels @hebadun can you be more specific on what actually fixed the issue?

1 Like
12

i have the same problem, someone resolved that ? i work i ionic 3.2.4