ZoomContainer z-index making other elements unclickable in elevatezoom

I am using elevatezoom inside bootstrap tabs…
Sometimes the zoomcontainer moves from where it is supposed to be and covers my other elements making them unclickable even when it is not visible.
please anyone could help me to resolve this problem…
thank you

Hi @muhammed, please bear in mind that when elements are made invisible through the CSS properties opacity:0 and visibility:hidden, the element is still actually physically there even though it is not visible. So if it has a higher zIndex than the rest of elements it will be covering them. To avoid these kind of situations to properly hide an element and physically remove it via CSS use display:none
Hope that helps

Hello @Andres_Vaquero
Thanks for your replay…
As you sugessted me to use display:none in CSS… Where exactly should i use it ??
should use it elevatezoom plugin or In Bootstrap Tabs…
it is very difficult to me to make any changes in elevatezoom plugin…
If it is in Bootstrap tabs then colud you please guide me more to resolve this…
as i have gone through the bootstrap tabs found that it already using display:none.

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

Thanks You…

Hi @muhammed, I’m sorry I have no familiarity with Bootstrap or the elevatezoom plugin so I could not offer further help. Perhaps if you send us a link to the page with the problem we can help you further by taking a look.
All the best!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.