How to remove the empty space between header and tabs-top?


I just start using ionic framework, and create a project with ‘ionic start myApp blank’.

Then I put a tabs inside the index.html, with ‘tabs-top’ class. And there is a 44px empty space between header and the tabs.

  <body ng-app="starter">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
            <ion-tabs class="tabs-top tabs-icon-top tabs-color-active-positive">
              <ion-tab title="Status" icon-off="ion-ios7-pulse" icon-on="ion-ios7-pulse-strong">
              <ion-tab title="Chats" icon-off="ion-ios7-chatboxes-outline" icon-on="ion-ios7-chatboxes">

How to remove the white space?


Hey there.

So first off, you’re starting with an incorrect setup for tabs, which is causing the issue.

You can add “tabs-icon-top” in the class : ion-tabs class=""

I had the same issue - wrapping the tab content in an ion-content is the problem. Remove that and it fixes it.

I got a workaround, sure is not the perfect solution, but it solved, i put the tabs inside “ion-nav-bar”, it worked, with some stylizing, but its a real “bad solution”

please remove the word padding from ion tag