Ionic-framework: Ionic 2 - ion-menu and ion-tabs together

Created on 15 Sep 2016  路  2Comments  路  Source: ionic-team/ionic-framework

Short description of the problem:

While using ion-tabs inside ion-menu, the tabs have opacity set to 0 and is not shown to the user. Setting the opacity to 1 turn the tabs visible but they doesn't work.

screenshot 2016-09-15 11 19 27

Looking at some answers on google, some people said that surrounding my tabs with "ion-content" solves the problem, but for me it doesn't.

What behavior are you expecting?

Just navigate between pages inside tabs on the sidemenu.

Steps to reproduce:

  1. Create an app with a ion-menu created by a ion-nav.
<ion-menu [content]="chat" side="right">
    <chat-panel></chat-panel>
</ion-menu>

<ion-nav [root]="rootPage" #conteudo #chat></ion-nav>
  1. chat-panel directive's component:
@Component({
  selector: 'chat-panel',
  templateUrl: 'build/pages/chat/panel/panel.html',
  directives: [InitToolbar]
})
export class ChatPanelPage {
  view: any;
  @ViewChild('panelTabs') panelTabs: Tabs;
  contactsPage: ChatContactsPage;
  sessionsPage: ChatSessionsPage;

  constructor() {
  }

  close() {
    this.view.dismiss();
  }
}
  1. chat panel html:
 <ion-tabs #panelTabs tabbarPlacement="top">
    <ion-tab  tabTitle="Conversas" [root]="sessionsPage"></ion-tab>
    <ion-tab  tabTitle="Contatos" [root]="contactsPage"></ion-tab>
</ion-tabs>

Other information:
Changing the "opacity" property of ion-tabbar class to 1 make the tabs appear, but they still doesn't work.

Which Ionic Version? 1.x or 2.x
ionic-angular 2.0.0-beta.11

Plunker that shows an example of your issue

I'll provide plunker only if necessary.

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v6.3.1
Xcode version: Xcode 7.3.1 Build version 7D1014

reply

Most helpful comment

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

All 2 comments

Hello, unfortunately I cannot reproduce this issue with our Ionic Conference App which uses a sidemenu with tabs. Would you mind taking a look at the setup on that app? Thanks!

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

Was this page helpful?
0 / 5 - 0 ratings