Ionic has-header being ignored in a list

Question

I just started using Ionic with Angular for a project. So this might be a beginners mistake.

So I made an html file with a header, tabs and a list inside a tab. Now I do get the problem that the first item of the list disappears after the header.

I'm trying to achieve this with the following code:

<ion-header-bar class="bar-default">
  <h1 class="title">Test</h1>
</ion-header-bar>

<ion-tabs class="tabs-default tabs-striped">
  <ion-tab title="Rooms">
    <ion-content class="scroll-content ionic-scroll has-header">
      <ion-list>
        <ion-item ng-repeat="room in Rooms">
          {{ room.Name }}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-tab>
  <ion-tab title="Another tab"></ion-tab>
  <ion-tab title="Another tab"></ion-tab>
</ion-tabs>

This does give me a header, a list and tabs. But like I said, the first item disappears after the header.

I noticed if I put the <ion-content><ion-list>..</ion-list></ion-content> outside of the tabs content, it does actually work like it should. But according to the documentation you can place the content inside of the ion-tab tag.

Any chance to accept my answer? Upvotes are more than wellcome :-) Cheer. — LeftyX

LeftyX LeftyX · Accepted Answer · 2015-09-18T10:36:14

ion-tabs contains a set of ion-tab but ion-tab directive requires you to include a ion-nav-view inside each tab.

You won't find this in the documentation.

Your html would look like this:

  <body ng-app="app">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
        <ion-tabs class="tabs-default tabs-striped tabs-top">
          <ion-tab title="Rooms">
            <ion-nav-view>
              <ion-content  ng-controller="mainCtrl">
                <ion-list>
                  <ion-item ng-repeat="room in Rooms">
                    {{ room.Name }}
                  </ion-item>
                </ion-list>
              </ion-content>
            </ion-nav-view>
          </ion-tab>
          <ion-tab title="Another tab">
            <ion-nav-view>
              <ion-content>AAA</ion-content>
            </ion-nav-view>
          </ion-tab>
          <ion-tab title="Another tab">
            <ion-nav-view>
              <ion-content>BBB</ion-content>
            </ion-nav-view>
          </ion-tab>
        </ion-tabs>
  </body>

I've used the class tabs-top for the ion-tabs directive but you can change it the way you prefer.

Notice that I've placed a <ion-nav-view> inside each <ion-tab>. That's the place where your content will be loaded by the framework.

It's tricky but it becomes obvious when you start playing with routes and each tab content is loaded from other views.

If you want to see how it works you can check this.

Ionic has-header being ignored in a list

1 Answers