Заставить Kendo UI Chart использовать всю ширину вкладки Bootstrap

У меня есть страница, где у меня есть 3 графика Kendo UI, каждый на отдельной вкладке. Я хочу, чтобы все графики использовали всю доступную ширину, но только первый делает это.

Я знаю, что могу указать ширину для диаграммы, но я не хочу / не могу указать это заранее (отзывчивость и все). Я попытался поиграть с шириной элементов, содержащих диаграммы. Я также попытался установить col-lg-12 класс на эти дивы. Ничто не похоже на работу.

Это мой 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>

Рабочий пример можно найти в этом jsFiddle.

1 ответ

Ваш идентификатор панели вкладок и идентификатор div диаграммы не должны совпадать.

<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 предоставляет метод изменения размера, который автоматически регулирует ширину диаграммы при изменении размера страницы / контейнера. Вы можете вызвать это, когда размер окна изменяется и когда отображается вкладка:

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

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

Обновлена FIDDLE

Если у вас все еще есть проблемы с исходным размером, вы можете создать диаграммы при первом отображении соответствующей вкладки.

Другие вопросы по тегам