search

waynegm / imgViewer2

Extensible and responsive jQuery plugin to zoom and pan images based on the Leaflet mapping library
MIT License
60 stars 34 forks source link

Not working on Bootstrap Hidden Tab or Not Active Tab #36

Closed conangithub closed 3 years ago

conangithub commented 3 years ago

Hello. When I put imgViewer2 inside second tab or third tab of AdminLte 3 (Bootstrap 4) Tab, it is not working. When I inspect element, it is working but its image is not loaded. If I put inside first tab that an active tab when page load, it is working well. Please help.

jQuery version 3.3.1 jQuery UI version 1.12.1 Leaflet version 1.3.1

wespaw commented 3 years ago

hi, did you manage to find solution for this?

conangithub commented 3 years ago

Not yet. Still wait for it.

waynegm commented 3 years ago

Can either of you provide a minimal example page with a few Tabs and nothing else for me to work with. I don't have time to learn AdminLte 3 from scratch.

conangithub commented 3 years ago

Ok sure.

Here is my code https://codepen.io/conan_code/pen/abWGdQq

At the first tab, imgViewer is working. At the second tab, imgViewer is not working.

waynegm commented 3 years ago

The problem is that content is not rendered in a Bootstrap tab until the tab is shown so on hidden tabs the imgViewer2 widget thinks the image size is 0x0. The fix is to not instantiate the widget until the tab is shown. Check out this modification of your code.

https://codepen.io/waynegm/pen/abWKwbM

Unfortunately, not a complete solution as imgViewer2 widget on hidden tabs are not updated during browser window resize.

conangithub commented 3 years ago

That's great. You save me.

I am understand. Just put the initialization inside bootstrap shown.bs.tab function.

For the widget on hidden tabs are not updated during resize, I think not a big problem for me. Open the hidden tab, resize it again and the widget would be shown/updated again.

Thank you very much. Stay safe.