Custom modal in ionic-vue doesn't wok with z-index for ion-toolbar

Ionic Framework Ionic Vue
1

Hello,

I have a nuxt ionic app where I created a custom modal (because the alert is not enough for display a form in a modal) in a vue component that I use in a nuxt page.
The app looks like this:
image
The css properties for the overlay div and the modal inside the div are:

.overlay {
  display: block;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal {
  background-color: #fefefe;
  margin-top: 300px; /* Location of the box */
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #888;
  width: 70%;
}

And for those elements that are seen are the ion-toolbar from inside the ion-card
That have the z-index: 10
image

  • How can I modify the z-index for toolbar (when the model is opened) ?

  • Or is there any other way to approach this custom modal implementation?

Thank you

2

Fixed: I assigned a much bigger value for z-index of my modal (z-index: 1000)

🤦 🤦 🤦