I have a modal 1 that opens a modal 2. The modal 2 has an ion-datetime and when I click on it, the popup comes up behind Modal 2 as shown.
I tried to reproduce in a plunker but it seems to work fine. If I click the datetime again, it shows on top like expected. I am also having a similar problem when Modal 2 has a Select element on it. The select options show up behind Modal 2.
Modal 1
import { Component } from '@angular/core';
import { ViewController, ModalController } from 'ionic-angular';
import {Modal2Page} from './modal2';
@Component({
selector: 'page-modal1',
template: `
<ion-content>
<ion-item>
<ion-label for="postDate">Date:</ion-label>
<ion-datetime id="postDate" name="postDate" displayFormat="MM/DD/YYYY h:mm A" pickerFormat="MM/DD/YYYY h:mm A"
[(ngModel)]="mydate"></ion-datetime>
</ion-item>
<button ion-button large color="primary" (click)="openModal2()">Open Modal 2</button>
</ion-content>
<ion-footer>
<button large ion-button (click)="close()">Close</button>
</ion-footer>
`
})
export class Modal1Page {
mydate:string = new Date().toISOString();
constructor(private viewController: ViewController,
private modalController:ModalController) { }
close(){
this.viewController.dismiss();
}
openModal2(){
let modal2 = this.modalController.create(Modal2Page);
modal2.present();
}
}
Modal 2
import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
selector: 'page-modal2',
template: `
<ion-content>
<ion-item>
<ion-label for="postDate">Date:</ion-label>
<ion-datetime id="postDate" name="postDate" displayFormat="MM/DD/YYYY h:mm A" pickerFormat="MM/DD/YYYY h:mm A"
[(ngModel)]="mydate"></ion-datetime>
</ion-item>
<ion-item>
<ion-label for="sel">Select:</ion-label>
<ion-select id="sel" name="sel">
<ion-option>Item 1</ion-option>
<ion-option>Item 2</ion-option>
<ion-option>Item 3</ion-option>
</ion-select>
</ion-item>
</ion-content>
<ion-footer>
<button large ion-button (click)="close()">Close</button>
</ion-footer>
`
})
export class Modal2Page {
mydate:string=new Date().toISOString();
constructor(private viewController: ViewController) { }
close(){
this.viewController.dismiss();
}
}
Does anyone know what might be causing this or if there is an open issue already? I tried to find an open issue but I wasn’t sure exactly how specific it might be in the issue log.