CODEWITHSUNDEEP
htmlcsstailwind-css
Aircod
Aircod

Reputation: 59

The SVG object is not made interactive by the elements it contains

I have a problem with a map. There are HTML elements on the map on the right side that will be clickable. In the map made in .svg, clicking on an area will cause some kind of reaction on the right side. Everything has to be contained in a .container (to be equal to the whole page).

I applied the map, the elements I wanted on top of it, and it was cool. But the svg object became practically unusable, because it is hidden under these superimposed elements on the right side. Only adding z-index: -9, on .test-box removes the issue, but then the elements on the right are hiding.

How to fix this issue correctly so that the map is clickable for the user and the elements on the right are visible? I want the map to be the full width, not in the .container.

Sandbox (Tailwind): https://play.tailwindcss.com/ShUaR2biWZ

Upvotes: 0

Views: 52

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17334

Since your.container class has a width of 100% and both left and right set to 0 you get this overlay.

You should be able to fix this by removing these classes and adding a width-class to you the .test-box div something like this:

<div class="test-box absolute top-0 h-full w-1/6 right-0 ml-20 mr-20">
   <section class=" right-0 flex flex-col h-full ml-auto cursor-pointer">
   ...
   </section>
</div>

You will need to tweak your right margins to get the desired result.

Upvotes: 1

Related Questions