search

partridgejiang / Kekule.js

A Javascript cheminformatics toolkit.
http://partridgejiang.github.io/Kekule.js
MIT License
250 stars 61 forks source link

Bootstrap conflict #90

Closed cleblond closed 5 years ago

cleblond commented 5 years ago

I noticed some strange behavior when using chemViewer with bootstrap tabs. Here's a JSfiddle that demonstrates. https://jsfiddle.net/cleblond/njy0vsrb/23/

Click on the Home tab and you'll see the viewer is off the page or something.

Thanks for the great tool!

partridgejiang commented 5 years ago

Hi @cleblond, at the time of creating the Viewer2D widget in the home tab, its parent element (<div id="home" class="tab-pane">) has a CSS style display: none. Unfortunately, inside this hidden element, the viewer widget is unable to properly calculate its size, so you may find it set the canvas to "height: 0px". A work-around is to manually call viewer.doResize() after switching to a hidden tab, or use style visibility: hidden instead of display: none to hide a tab panel.