CODEWITHSUNDEEP
javascripthtmlcsstailwind-css
equi
equi

Reputation: 164

Map 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: enter image description here

<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?

Upvotes: 0

Views: 576

Answers (1)

Aastha Bist
Aastha Bist

Reputation: 356

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

Upvotes: 1

Related Questions