Принуждение диаграммы пользовательского интерфейса Kendo использовать всю ширину вкладки Bootstrap

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

Я знаю, что могу указать ширину диаграммы, но я не хочу/не могу указывать это заранее (отзывчивость и все такое). Я пробовал играть с шириной div, содержащих диаграммы. Я также пытался установить класс 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>

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


twitter-bootstrap kendo-ui bootstrap-tabs kendo-chart
person Peter    schedule 15.07.2015    source источник
comment
Исправление Rienus работает в вашем jsFiddle. stackoverflow.com/questions/17206631/ . Ваше здоровье   -  person Alex Coloma    schedule 15.07.2015

Ответы (1)


arrow_upward
2
arrow_downward

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

<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>

Кендо предоставляет метод изменения размера, который автоматически регулирует ширину диаграммы при изменении размера страницы/контейнера. Вы можете вызвать это, когда размер окна изменяется и когда отображается вкладка:

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

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

Обновлен FIDDLE.

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

person ezanker    schedule 15.07.2015