Заставить 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
Если у вас все еще есть проблемы с исходным размером, вы можете создать диаграммы при первом отображении соответствующей вкладки.