When I have tabs on the page, there is some blank space near the top

Ionic Framework ionic-v3
1

I have inserted tabs:

<ion-tabs>
    <ion-tab tabIcon="cloud" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="people" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="options" [root]="tab3"></ion-tab>
</ion-tabs>

Now on one of my pages I have the following content:

<ion-content style="background:blue">
<h2>test</h2>
</ion-content>

The problem is the content is no aligned where it is supposed to. The content is blue, but the whole content isn’t blue. The top part (seems like the size of navbar would be) is white. So it looks like somethings like this in sequential order from top to bottom:

10% blank white area
80% blue content with the h2 title
10% tabs.

I want to remove this blank white area how do I do this?

2

just add
ion-navbar-section { display: none; }
to your tabs.scss

3

i found a “solution” its a really bad practice one, but it worked after all, i just added a ion-nav-bar and put the tabs code inside it, just add some style
<ion-header-bar> <ion-tabs style="margin-left: -5px"> <ion-tab title="Page 1" ui-sref="tabs.about.page1"> <ion-nav-view name="about-page1"></ion-nav-view> </ion-tab> <ion-tab title="Page 2" ui-sref="tabs.about.page2"> <ion-nav-view name="about-page2"></ion-nav-view> </ion-tab> </ion-tabs> </ion-header-bar>