ionic - tabs not fixed at bottom of the screen

Question

I'm having an issue when trying to use ionic tabs.

I need them to be always visible at the bottom of the screen (something like position: fixed; bottom: 0; left: 0;).

They problem I've got is that in my current setup, is not behaving like supposed to.

Here's the template I'm using:

  <h2>This is subview</h2>
  <div class="list">
    <div class="item " ng-repeat="el in elements">
      {{el.name}}
    </div>
  </div>
      <div class="tabs tabs-icon-only tabs-dark">
        <a class="tab-item">test</a>
        <a class="tab-item">test 1</a>
        <a class="tab-item">test 2</a>
    </div>

but the tabs are linked to the bottom of the screen, and so, if i have to scroll the page, the are at the bottom instead of always visible with the content scrolling below on a different z-index.

I may have explained this badly, so here's an example that explains this better: http://codepen.io/NickHG/pen/NNZYwK?editors=1010

And to summarize: What I have to do to have the tabs always fixed to the bottom even if the page is longer?

PS: All of this refers to a sub view, if it is important somehow.

Thanks for any advice and help

Answer 1

At the end, I solved this moving the tabs one level up so that they are not in the subview anymore, and copied some of the scope events into the main controller instead of the subview controller.

Here's the code that I changed: http://codepen.io/NickHG/pen/NNZYwK?editors=1010

<ion-view>
    <ion-content>
      <h1>Details for id</h1>      
      Below the line, subview content:
      <hr>
      <div ui-view="myDetailsSubview"></div>

    </ion-content>

    <ion-tabs class="tabs-positive tabs-icon-top">      
      <ion-tab>test 1</ion-tab>
      <ion-tab>test 2</ion-tab>     
      <ion-tab>test 3</ion-tab>
    </ion-tabs>

</ion-view>