2

I have a page where I have 3 Kendo UI graphs, each in a separate tab. I want all graphs to use the full width available, but only the first one does so.

I know I can specify a width for the chart, but I don't want to / cannot specify this upfront (responsiveness and all). I've tried playing around with the width of the divs containing the charts. I've also tried setting the col-lg-12 class on these divs. Nothing seems to work.

This is my html:

<ul class="nav nav-tabs">
    <li class="active"><a data-target="#chart1" data-toggle="tab">Chart 1</a></li>
    <li><a data-target="#chart2" data-toggle="tab">Chart 2</a></li>
    <li><a data-target="#chart3" data-toggle="tab">Chart 3</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="chart1">
        <div id="chart1"></div>
    </div>
    <div class="tab-pane fade in" id="chart2">
        <div id="chart2"></div>
    </div>
    <div class="tab-pane fade in" id="chart3">
        <div id="chart3"></div>
    </div>
</div>

A working example can be found in this jsFiddle.

Peter
  • 13,733
  • 11
  • 75
  • 122
  • Rienus fix works in your jsFiddle. http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using . Cheers – Alex Coloma Jul 15 '15 at 09:14

1 Answers1

2

Your tab-pane ID and chart div ID should not be the same.

<div class="tab-pane fade in active" id="chart1tab">
    <div id="chart1"></div>
</div>
<div class="tab-pane fade in" id="chart2tab">
    <div id="chart2"></div>
</div>
<div class="tab-pane fade in" id="chart3tab">
    <div id="chart3"></div>
</div>

Kendo provides a resize method that automatically adjusts the chart widths as the page/container is resized. You could call this when the window is resized and when a tab is shown:

$(window).on("resize orientationchange", function () {        
    kendo.resize($("body"));
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    kendo.resize($("body"));
});

Updated FIDDLE

If you still have issues with the initial size, you could create the charts the first time the corresponding tab is shown.

ezanker
  • 24,628
  • 1
  • 20
  • 35