Ion-tabs on TOP of the screen

ionic-v1
1

The result on IOS or Android is ok;

But the result on a web browser (Chrome or Firefox) is different, the content is behind the tabs and the tabs are chopped off by the navbar…

2

depends on your code… any code examples? a codepen would be the best.

3 
<ion-tabs class="tabs-icon-top tabs-balanced">
  <ion-tab title="{{'Table view' | translate}}" icon="ion-compose" ng-click="goTab('workforce')">
    <ion-nav-view name="workforce"></ion-nav-view>
  </ion-tab>

  <ion-tab title="{{'Calendar view' | translate}}" icon="ion-android-calendar" ng-click="goTab('calendar')">
    <ion-nav-view name="calendar"></ion-nav-view>
  </ion-tab>

  <ion-tab title="{{'List view' | translate}}" icon="ion-ios-list-outline" ng-click="goTab('list')">
    <ion-nav-view name="list"></ion-nav-view>
  </ion-tab>
</ion-tabs>
4

Did you tried add this class: “tabs-top” to ion-tabs?

5

image
Screenshot from 2015-09-07 17:29:34.png1014×333 21.5 KB

6

Here the problem seems to be the content, am I wrong?

If the problem is that the content is behind the header+tabs you maybe could try with:
class=“has-subheader” has-header=“true”

in ion-content.

7

i add the two class, but ion-tabs is always hidden… :frowning:

image
Screenshot from 2015-09-07 18:02:08.png1039×526 28.7 KB

8

I think you might need to use ion-nav bar in your index.html first, then use simply ion-view, I had that same problem.Then I broke up my templates in to separate ones, set my index to:

 <body ng-app="app">
<ion-nav-bar class="bar-positive"> 
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>          
<ion-nav-view></ion-nav-view>
  </body>

That is my whole index. I setup a tabs.html where I setup the tabs separately

<ion-tabs class="tabs-icon-top tabs-positive">
        <ion-tab title="Feed" icon="ion-ios-list" ui-sref="tabs.feed">
          <ion-nav-view name="feed-tab"></ion-nav-view>
        </ion-tab>  
    <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Cars" icon="ion-android-car" ui-sref="tabs.Cars">
          <ion-nav-view name="Cars-tab"></ion-nav-view>
        </ion-tab>
      </ion-tabs>

Then individual templates start with Feed.html

 <ion-view view-title="Feed" view-name="feed-tab">
<ion-pane padding="true">
   </ion-pane>
      </ion-view>

Also ionic automatically sets up tabs to bottom when testing on ios phones and top for android, try running them emulated and see if you get anything. I hope this helps.

1 Like