on-Select is hidden behind Ion Modal

Ionic Framework
3

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.