4

I have two tabs, tab 1 and tab 2, when the page is initially loaded, the graph in the first tab is loaded at the same time, which is fitting right in col-md-6, now, when I click tab 2, the graph in that tab gets collapsed to almost half of the first one, I want it to also fit in the col-md-6 right and fine, Is there anything I'm doing wrong?

Please, have a look at this jsfiddle

Udhay Titus
  • 5,761
  • 4
  • 23
  • 41
Bilal Ahmed
  • 1,043
  • 4
  • 17
  • 32
  • See [this question](http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using). It's caused by width of hidden elements, where browser doesn't calculate it. – Paweł Fus Aug 03 '16 at 12:38
  • @PawełFus I read ryenus's answer, but the issue still remains when I resize the browser window. – Bilal Ahmed Aug 03 '16 at 13:40
  • Try also my solutions, for example: `render chart at the beginning, but after tab click call chart.reflow()`. – Paweł Fus Aug 03 '16 at 14:46
  • @PawełFus Can you please try editing my [jsfiddle](https://jsfiddle.net/bilalahmed7827/r9dt5j4n/) , I've tried it myself but no gain, may be I'm doing it wrong, I just added this line `$('#graph-container-gray').highcharts().reflow()` on the tab 2 click event, isn't it? – Bilal Ahmed Aug 03 '16 at 15:14
  • 2
    See answer by Udhay Titus. – Paweł Fus Aug 04 '16 at 07:51

2 Answers2

7

use this jquery tab select function, it will solve your problem.

here is modified fiddle click here

 jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
    jQuery( "#graph-container-gray, #graph-container-red" ).each(function() {
        var chart = jQuery(this).highcharts(); // target the chart itself
        chart.reflow() // reflow that chart
    });
})
Udhay Titus
  • 5,761
  • 4
  • 23
  • 41
0

Take A Look At This Fiddle Click To View

<div class="tab-content">
                <div class="tab-pane active" id="1">
                    <div class="col-md-6">
        <div id="graph-container-gray" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                </div>

                </div>
                <div class="tab-pane active" id="2">
                <div class="col-md-6">
                        <div id="graph-container-red" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                    </div>
                </div>
            </div>
Tamilmani Purushothaman
  • 59
  • 1
  • 12