The header on the page is hiding the list items

ionic-v1
1

Hi All,

I am trying to make a page with a header and lists.
However the problem is that the header is hiding the first list item.

Shouldn’t the control be added one after another.
Am I missing something?

Thanks,
karthik

2

Could you provide your code? Also try by adding class="has-header" to your <ion-content> directive. This will push your content down and prevent overlap.

3

Hi Jason,

Thanks for the quick reply. Im starting to appreciate the wonderful ionic community,

Apart from the header, I have tabs as well.
The header and tabs together are hiding a couple of list items.
Tried to post a codepen but couldnt figure out how to get that work.

<ion-header-bar class="bar-positive">
    <h2 class="title">Audios</h2>
  </ion-header-bar>

<ion-tabs class="tabs-positive tabs-top">
  <ion-tab title="English">
    <ion-content>
      <ion-list>
        <ion-item> <a href="Som1.html" rel="external">The Science of Meditation - Part 1</a> </ion-item>
        <ion-item> <a href="som2.html" rel="external">The Science of Meditation - Part 2</a>  </ion-item>
        <ion-item> <a href="som3.html" rel="external">Power of Thought</a></li> </ion-item>
        <ion-item> <a href="som4.html" rel="external">18 Principles of PSSM - Part 1</a>  </ion-item>
        <ion-item> <a href="som5.html" rel="external">18 Principles of PSSM - Part 2</a>  </ion-item>
      </ion-list>
    </ion-content>
  </ion-tab>

  <ion-tab title="Telugu">
    <ion-content>
      <ion-list>
        <ion-item> <a href="Som1.html" rel="external">Anapanasati - Part 1</a> </ion-item>
        <ion-item> <a href="som2.html" rel="external">Anapanasati - Part 2</a> </ion-item>
        <ion-item> <a href="som3.html" rel="external">Adhyatmika Shastram </a> </ion-item>
        <ion-item> <a href="som4.html" rel="external">Anando Brahma - Part 1</a> </ion-item>
      </ion-list>
    </ion-content>
  </ion-tab>

  <ion-tab title="Hindi">
    <ion-content>
      <ion-list>
        <ion-item> <a href="Som1.html" rel="external">Dhyan Evam Dhyan Abhyas - Part 1</a> </ion-item>
        <ion-item> <a href="som2.html" rel="external">Dhyan Evam Dhyan Abhyas - Part 2</a> </ion-item>
        <ion-item><a href="som3.html" rel="external">Anapanasati Ka Abhyas</a> </ion-item>
        <ion-item> <a href="som4.html" rel="external">Dhyana Bhaja Govindam</a> </ion-item>
      </ion-list>
    </ion-content>
  </ion-tab>
</ion-tabs>
4

Sorry Vegi, I can’t help unless I see come code, if you are using tabs as well, make sure you are structuring your HTML correctly, if the tab relates to the content, then you should separate your tabs with your content.