Yesterday, I posted about an issue with BootStrap and panel collapsables causing graph sizes to become distorted. The post was locked because there was no accompanying code. I have now created a code snippet for you all to see the exact problem I am facing: http://jsfiddle.net/oeq980ts/1/
<p>the code can be found on jsFiddle :) </p>To refer back to my previous post from yesterday, here is the link:
The issue becomes evident when comparing collapse 2 to collapse 1 after running the jsfiddle.
Yesterday's post:
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
While experimenting with Bootstrap's collapse feature, I noticed a strange behavior with .collapse (hides content) and .collapse-in (shows content).
I initially set collapse1 as .collapse-in so that its contents, including a graph (with min-width:310px; height:400px), would be displayed properly. However, when I opened collapse2, the same graph appeared significantly undersized, almost half the width. After some trial and error, I realized that the graphs only display correctly when using the class collapse. If just using panel-collapse collapse, clicking to reveal the content results in a completely disproportionate size.
Additionally, if .collapse-in is applied, users can collapse/unclapse while the graph in that section remains visible. This might not be ideal for those who prefer the content hidden by default.
Although I probably won't be using this particular setup, I was curious about the rationale behind this behavior.