<ion-content> goes behind <ion-header> in Ionic

Question

<ion-header> 
  <ion-navbar>
   <ion-title>Physics</ion-title> 
 </ion-navbar> 
</ion-header>

<ion-content padding has-header contentTop="200px"> 
  <ion-list class="chapter-list"> 
      <button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button> 
  </ion-list> 
</ion-content>

This is my code in which <ion-content> is hiding behind <ion-header>. My ionic version is 3.19.1.

How to fix this. I have tried has-header as well.

.chapter-list{ img{ height: 30px; margin: 0 11px 0px 0px !important; } ion-label.label.label-md { white-space: unset; margin: 0; line-height: 25px; font-size: 1.5rem } button{ border-bottom: 1px solid #dedede; } .item-inner{ border: none !important; } } This is styling which i gave to list. — Rahul

Rasitha Ariyarathna Rasitha Ariyarathna · Accepted Answer · 2018-03-03T16:59:20

Try adding <ion-grid></ion-grid> inside ion-content tag

<ion-header> 
  <ion-navbar>
   <ion-title>Physics</ion-title> 
 </ion-navbar> 
</ion-header>

<ion-content padding has-header contentTop="200px">
  <ion-grid>
  <ion-list class="chapter-list"> 
      <button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button> 
  </ion-list> 
  </ion-grid>
</ion-content>

<ion-content> goes behind <ion-header> in Ionic

1 Answers