CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraphighcharts
user2982832
user2982832

Reputation: 177

BootStrap collapse incorrect sizes

Posted a question yesterday regarding BootStrap and panel collapsables being very dodgy in the fact graph sizes were messing up. It got locked due to there being no code. I have created a code snippet for you guys which demonstrates the exact problem I'm having: http://jsfiddle.net/oeq980ts/1/

  <p>the code is on jfiddle :) </p>

For reference this is my post from yesterday https://stackoverflow.com/questions/36109483/collapse-in-bootstrap-issue

put the problem is pretty clear form running the jsfiddle: compare collapse 2 to collapse 1.

Yesterdays post:

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

I was playing around with collapse via Bootstrap and came across a strange interaction with .collapse(Hides the content) and .collapse-in (Shows the content).

By default I set collapse1 as .collapse-in meaning the contents inside it would show: the insides contained a graph (min-width:310px; height: 400px). Fit perfectly, I opened up the collapse2 and to my dismay the same graph was shown very undersized with the width being almost half the size. After playing around with it - the graphs will only show in its proper size when the class collapse is used, otherwise if the class is just panel-collapse collapse, and you click on the collapse to show the contents it will show a completely disproportionate size.

Oh and I should add if .collapse-in is set then the user can collapse/uncollapse and the graph set with collapse in will still display. Bit unfortunate for those who don't want the contents being showed by default.

Probably not going to use this anyway, however I was just really interested in the reasoning behind it.

enter image description here

enter image description here

Upvotes: 0

Views: 708

Answers (1)

rmondesilva
rmondesilva

Reputation: 1792

You can do something like this:

Steps:

  1. Make them all shown up at first load (I mean add in class in collapse div) - This will make them fix by their own, Fitted to it's container as you wish. So collapses will be something like this:

    <div id="collapse2" class="panel-collapse collapse in">

  2. Then hide them using jQuery( remove class in to all div that you want to be hidden )

    $(document).ready(function(){ $('.collapse').not(':eq(0)').removeClass('in'); });

In here, I just imitate what you did in your fiddle, I hid the first collapse.

Check your jsFiddle again.

Upvotes: 1

Related Questions