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

ionic-v1
1

Hello,

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-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
            <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>
              <ion-tab title="Chats" icon-off="ion-ios7-chatboxes-outline" icon-on="ion-ios7-chatboxes">
              </ion-tab>
            </ion-tabs>
      </ion-content>
    </ion-pane>
  </body>

How to remove the white space?

Thanks,
Rong.

2

Hey there.

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

http://ionicframework.com/docs/api/directive/ionTabs/

3

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

4

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

5

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”

6

please remove the word padding from ion tag