Ion-list scroll on item not work


#1

I need show on modal dialog a list of element and scroll this list on selected element

this is my html

<!--
  Generated template for the EditDoublePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button (click)="close()">Cancel</button>
    </ion-buttons>
    <ion-title>{{dialogTitle}}</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content >
    <ion-list radio-group >
       <ion-list-header>
           Timezones
       </ion-list-header>
       <ion-item *ngFor="let item of timezones" [id]="item.index">
           <ion-label>{{ item.tz.formatted() }}</ion-label>
           <ion-radio [checked]="item.tz.formatted() == timezone.formatted()" value="item" (click)="selectTimezone(item)"></ion-radio>
       </ion-item>
    </ion-list>
   </ion-content>

this is my ts file

import { FormBuilder } from '@angular/forms';
import { IonicPage, NavController, NavParams, ViewController, Content } from 'ionic-angular';
import { Component, ViewChild } from '@angular/core';
import { TimeZone } from '../../data/timezone';
// import { isDefined } from '@angular/compiler/src/util';

/**
 * Generated class for the EditTimezonePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
const LOG_TAG = 'EditTimezonePage';

@IonicPage()
@Component({
  selector: 'page-edit-timezone',
  templateUrl: 'edit-timezone.html',
})

export class EditTimezonePage {

  timezone: TimeZone;
  timezones = [];
  dialogTitle: string;
  index = -1;

  @ViewChild(Content) content: Content;

  constructor(public navCtrl: NavController, public navParams: NavParams, public view: ViewController, public formBuilder: FormBuilder) {
    this.timezone = new TimeZone(this.navParams.get('timezone'));
    this.dialogTitle = this.navParams.get('title');
    var timeformat = this.navParams.get('timeformat');
    console.log(LOG_TAG + ' timezone ' + this.timezone.toString());
    console.log(LOG_TAG + ' timeformat ' + timeformat);
    this.initTimezones(timeformat);
  }

  ionViewDidLoad() {
    console.log(LOG_TAG + ' ionViewDidLoad');
    console.log("index " + this.index)
    if (this.index != -1) {
      var e = document.getElementById(this.index + "");
      if (e) {
        let yOffset = e.offsetTop;
        console.log("yOffset " + yOffset);
        this.content.scrollTo(0, 100, 0);
      } else {
        console.error("index " + this.index + " not found");
      }
    }
  }

  initTimezones(timeformat){
    var tz = new TimeZone(-12);
    var deltaTz = 60;
    if (timeformat == 3) {
      deltaTz = 15;
    }
    var i = 0;

    while (tz.getValue() < 12.0) {
      var tzp = new TimeZone(tz.getValue());
      this.timezones.push({ 'index': i, 'tz': tzp });
      if (this.timezone.formatted() == tzp.formatted())
        this.index = i;
      i++;
      tz.addMinute(deltaTz);
    }
  }


  selectTimezone(tz) {
    this.view.dismiss(tz);
  }

  close() {
    this.view.dismiss();
  }

}

this is my console log

edit-timezone.ts:34 EditTimezonePage timezone TimeZone{h=0, m=0}
edit-timezone.ts:35 EditTimezonePage timeformat 2
edit-timezone.ts:40 EditTimezonePage ionViewDidLoad
edit-timezone.ts:41 EditTimezonePage index 12
edit-timezone.ts:46 EditTimezonePage yOffset 568

the yOffset is founded but i can see the scroll.