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.