Форсирование диаграммы пользовательского интерфейса Kendo для использования полной ширины вкладки Bootstrap

Question

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

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

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

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

Answer 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

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