Ionic tabs hidden beneath the header

Question

I have a blank app with many pages. One of these pages needs to be diveded into tabs. I want a few tabs to be displayed under the header (which has logo and back button). However, for some reason, the tabs are hidden almost completly beneath the header.

The structure is the following:

<ion-view view-title="MyPage">
    <ion-header-bar align-title="center">
        <div class="app_header_side">
            <button class="button back-button">
                <i class="icon ion-ios-arrow-back"></i>
            </button>
        </div>
        <div class="app_header_center">
            <div class="text-center">
                LOGO
            </div>
        </div>
        <div class="app_header_side">
            &nbsp;
        </div>
    </ion-header-bar>
    <ion-content class="padding has-header">
        <ion-tabs class="tabs-positive tabs-icon-top">
            <ion-tab title="All time" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <!-- Tab 1 content -->
            </ion-tab>
            <ion-tab title="Month" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <!-- Tab 2 content -->
            </ion-tab>
            <ion-tab title="Week" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
               <!-- Tab 3 content -->
            </ion-tab>
        </ion-tabs>
    </ion-content>
</ion-view>

I have tried to put the tabs everywhere. In the header, before "ion-view", before "ion-content". Nothing worked. The only way to make ti work was to add

style="padding-top: 30px;"

in the tag for "ion-content". But I would prefer to avoid putting fixed padding.

Conrad Lotz Conrad Lotz · Accepted Answer · 2016-05-09T16:41:26

I would suggest the following by declaring the header as follow:

<ion-header-bar class="bar-header">

and then defining the has-header

 <ion-content class="has-header">

Alternatively as a test you can set:

<ion-content class="has-subheader">

That would imply that something like a ion-nav-bar for example is set as the header already. Then set the ion-header-bar as bar-subheader.

IONIC Headers and Sub-Headers

Ionic tabs hidden beneath the header

3 Answers