Ionic striped tabs (bug?)

ionic-v1
1

My striped tabs seem to be in the scroll view of the app and are not sticking at the top of the header.

image

introduction_home.html

<ion-pane>
<ion-header-bar class="bar-stable has-tabs-top">
    <h1 class="title">App</h1>
</ion-header-bar>
<ion-content>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item {{data.introType == introType ? 'active' : ''}}" ng-repeat="introType in introTypes" ng-click="selectIntroType(introType)">
        <i class="{{ introType.icon }}"></i>
        {{ introType.text }}
      </a>
    </div>
</div>
</ion-content>
</ion-pane>

tabs.html (tabs at bottom of the app that manage state)

<ion-tabs class="tabs-positive tabs-icon-top">

  <ion-tab title="Introduce" href="#/tab/introduction_home" icon-on="ion-paper-airplane" icon-off="ion-paper-airplane">
    <ion-nav-view name="introduction_home-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" href="#/tab/about" icon-on="ion-ios-information" icon-off="ion-ios-information-outline">
    <ion-nav-view name="about-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

app.js

    window.appVersion = "0.0.0";
    // Ionic Starter App

    // angular.module is a global place for creating, registering and retrieving Angular modules
    // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
    // the 2nd parameter is an array of 'requires'
    window.app = angular.module('starter', ['ionic'])
        .run(function($ionicPlatform) {
            $ionicPlatform.ready(function() {
                // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
                // for form inputs)
                if(window.cordova && window.cordova.plugins.Keyboard) {
                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                }
                if(window.StatusBar) {
                    StatusBar.styleDefault();
                }
            });
        })
        .config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/tab/introduction_home");

            $stateProvider.state('tabs', {
                url: '/tab',
                abstract: true,
                templateUrl: 'templates/tabs.html',
                controller: 'TabsController'
            })
            .state('tabs.introduction_home', {
                url: '/introduction_home',
                views: { 
                    'introduction_home-tab': {
                         controller: 'IntroductionHomeController',
                         templateUrl: 'templates/introduction_home.html'
                    }
                }
            })

        })

index.html

<body ng-app="starter">
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>
2

Striped tabs should be Inside Ion-header bar

3

Close… tabs should be outside of the ion-content.

4

trying what @mhartington suggested:

introduction_home.html

<ion-pane>
<ion-header-bar class="bar-stable has-tabs-top">
    <h1 class="title">App</h1>
</ion-header-bar>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item {{data.introType == introType ? 'active' : ''}}" ng-repeat="introType in introTypes" ng-click="selectIntroType(introType)">
        <i class="{{ introType.icon }}"></i>
        {{ introType.text }}
      </a>
    </div>
</div>
<ion-content> ...</ion-content>

or if I do this (move the header and the tabs outside of the pane)

introduction_home.html

<ion-header-bar class="bar-stable has-tabs-top">
    <h1 class="title">App</h1>
</ion-header-bar>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item {{data.introType == introType ? 'active' : ''}}" ng-repeat="introType in introTypes" ng-click="selectIntroType(introType)">
        <i class="{{ introType.icon }}"></i>
        {{ introType.text }}
      </a>
    </div>
</div>
<ion-pane>

<ion-content>

I get this now:
image

5

For future people, I added this to my CSS file and that seemed to fix it:

in the css file, I have this:

.has-tabs.has-header {
top: 93px !important;
}