Ion-tabs with tabs-icon-top tabs-top does not work on Android & IOS

Question

Ion-tabs with tabs-icon-top tabs-top does not work on Android & IOS

I am having troubles making top tabs working on Android and IOS.

Here the code I use:

<ion-tabs class="tabs-balanced tabs-icon-top" >

The result on a web browser (Chrome or Firefox) is just fine. But the result on IOS or Android after build is different (the content is behind the tabs and the tabs are chopped off by the navbar)

Anyone has the same problem? Any way to fix it?

angularjs
ionic-framework
ionic

Answer 1

If you use last versions 1.0.0-rc.x instead try to define tab position in $ionicConfigProvider

 $ionicConfigProvider.tabs.position("top");

See demo in Codepan

I think it comes from approach that by default Android uses top tabs when iOS - bottom and for better availability they (Ionic) switched to this implementation.