Ionic 2 first item on list hidden by header on return to page

@lemurmonky wrote:

I had some weird behavior with the following ( very basic code ) , the top item in the list would be displayed on an android device on first navigation, however, after navigating away and back to the page, the first item on the list would appear hidden.

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


<ion-content>
  <ion-list>
        <button ion-item *ngFor="let item of taskList" (click)="itemSelected(item)">
          {{ item }}
        </button>
      </ion-list>
</ion-content>

i tried

1. adding a margin
2. using has-header - css attribute ( which is apparently not required for ionic2 )
3. using content.scrollToTop()

none of which worked.

through trial and error got to this to work

import { Component,ViewChild } from '@angular/core';
......

  @ViewChild(Content) content: Content;

ionViewDidEnter()
  {
    console.log('ionViewDidEnter FacilityTaskPage');
    this.content.resize();
  }

I still don’t understand why this works, but have posted in case

1. somebody knows why
2. somebody has a similar problem

Posts: 1

Participants: 1

Read full topic