How to add custom tabs at the top of a page?

ionic-v1
1

hello,

i have a simple page

http://codepen.io/patrioticcow/pen/bdqvwb?editors=101

i am trying to have the tabs be stuck to the header and the content to flow underneath. Right now no matter where i place it the content doesn’t flow properly under the tabs

any ideas?

2

Take the tabs out of the ion-content like the following:

 <ion-header-bar class="bar-positive">
   <h1 class="title">Home</h1>
 </ion-header-bar>

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
  <div class="tabs">
    <a class="tab-item active" href="#">
      <i class="icon ion-home"></i> Test
    </a>
      <a class="tab-item" href="#">
      <i class="icon ion-star"></i> Favorites
    </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i> Settings
      </a>
    </div>
  </div>


  <ion-content style="padding-top:48px">
       <p>test</p>
  </ion-content>
3

sure, but then the content starts from under the tabs…

4

Isn’t that what you wanted?

5

i meant that the content starts hidden under the tabs, and not below the tabs.

sorry for missunderstanding

6

Notice that I have a padding-top:48px on the ion-content tag. Try it in your CodePen.

Edit: I forked your CodePen… here it is with the changes. http://codepen.io/BradBurns/pen/OVpvjK

Let me know if that resolved your issue.

~ Brad

7

thanks for the update.

i was thinking that there is a build in css rule or some kind of div arrangement that would fix this issue without the need to add custom styles.

but this works, nevertheless

8

Good stuff, glad it worked.

~ Brad