0
132
ViewsMap displays above modal
I am using tailwind css and flowbite and I want to display a modal, I am using this code for the modal from flowbite but the map somehow displays on top of my modal,
as you can see:
<div class="grid grid-cols-2 gap-4 ml-8 bg-gray-100 w-screen h-screen ">
<div name="left_side" class=" mt-6 mb-6 h-max ">
<Modal/>
</div>
<div class="min-h-full">
<Map /> (leaflet map)
</div>
</div>
Can You please let me know any quick fix for this?
·
Santiago Trujillo
1 answers
Answer question0
You can either modify the z-index for your map element to be lower, or increase the z-index value for your modal.
Try adding a similar class to following to your map element:
.map-element {
z-index: -1;
}
To modify z-index for your modal, you can try adding it as an arbitrary value to your modal's class attribute:
<div class="z-[100]">
From tailwindcss documentation: https://tailwindcss.com/docs/z-index#arbitrary-values
·
Santiago Trujillo
Report
Answer question