Ionic version:
“@ionic/core”: “^5.0.7”,
If I put an ion-select inside an ion-modal , the ion-select disappear behind the modal and it’s impossibile to use.
How this can be fixed?
Ionic version:
“@ionic/core”: “^5.0.7”,
If I put an ion-select inside an ion-modal , the ion-select disappear behind the modal and it’s impossibile to use.
How this can be fixed?
Do you have a sample that we could look at? Kind of hard to the details without one.
Hi, thank you in advice for your help.
It’s not a specific code…it appears every time that a ion-select it’s inside of an ion-modal…
Note: I’m working on a stencil-ionic pwa project. No angular. I don’t know if can help.
My modal has this structure:
<ion-header class="modal-header"></ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Gender</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
And if I click on the ion-select this it’s behind the modal and can’t interact with it. If I inspect the dom, the ion-select options are behind the ion-modal.
I think that the problem it’s because the ion-modal has “position: absolute”. I’m trying with z-index on the select element but nothing it’s solved.
Can you make a demo so that we can inspect?
I’m not able to provide a live demo (I’m trying to) but this is the project on github
A simple start for ionic-stencil pwa with a modal.
Pretty simple fix
import { Component, h } from '@stencil/core';
import { modalController } from '@ionic/core';
@Component({
tag: 'app-home',
styleUrl: 'app-home.css',
})
export class AppHome {
async openModal() {
const modal = await modalController.create({
component: 'app-modal',
});
modal.onWillDismiss().then((x) => {
console.log(x);
});
await modal.present();
}
TL;DR, don’t create modals manually. Use the built in controllers to do this.
Thank you so much!
I’ve created the modal manually because I followed the method that I saw here in Javascript code.
function presentModal() {
// create the modal with the `modal-page` component
const modalElement = document.createElement('ion-modal');
modalElement.component = 'modal-page';
// present the modal
document.body.appendChild(modalElement);
return modalElement.present();
}
Yeah, we need to update the overlay usage docs here. Can you open an issue on the ionic-docs repo?
sure! I will open an issue.
Thank you so much for your help. Really appreciated!
Have a good day