Hi.
I am fairly new to ionic, however when i build to Android 4.4.2 KitKat. The Tabs do not show, they are there however and clickable, just behind something preventing the visibility.
I do not know about other devices etc… because i have only an android available to me. Does work on pc web version (chrome)
Did look to see what is hiding it (narrowed it down to the header somewhere)
Unsure if I am doing something wrong, or just a general bug. Though as it functionally works…
Steps to reproduce:
- Download the tabs starter
- Replace App.ts with the following below
- Build and deploy to Android.
- Normally you would then add the button menuToggle to each of the pages to show the the menu icon (although doesn’t matter)
import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, MenuController, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
@Component({
template:`<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>`
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
private rootPage: any;
pages: any[];
constructor(
private platform: Platform,
public menu: MenuController
) {
this.pages = [
{ title: 'Tabs Page', component: TabsPage }
// more would obviously follow may or may not have tabs involved
];
this.rootPage = TabsPage;
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
ionicBootstrap(MyApp, [], {});