Итак, я создаю страницу с вкладками с использованием Twitter Bootstrap, но содержание моего активного активного div всегда отличается от содержимого моих других вкладок. Например, я помещаю в диаграммы с использованием highcharts.js на разных вкладках, но активный всегда отображается правильно, а другие имеют неправильную ширину.
Посмотрите пример ниже:
<div class = "row-fluid">
<div class = "span9">
<div class = "row-fluid">
<h3>Test</h3>
<ul class="nav nav-tabs">
<li class = "active">
<a data-toggle = "tab" href = "#one">One</a>
</li>
<li><a data-toggle = "tab" href = "#two">Two</a></li>
<li><a data-toggle = "tab" href = "#three">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one" >
<h4>One</h4>
<div id = "container1"></div>
<script type = "text/javascript">
$(function () {
$('#container1').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</div>
<div class="tab-pane" id="two" >
<h4>Two</h4>
<div id = "container2"></div>
<script type = "text/javascript">
$(function () {
$('#container2').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</div>
<div class="tab-pane" id="three" >
<h4>Three</h4>
<div id = "container3"></div>
<script type = "text/javascript">
$(function () {
$('#container3').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</div>
</div>
</div>
</div>
<div class = "span3">
<p>Here is the content on my sidebar</p>
</div>
</div>
В этом случае переключение активной вкладки на загрузку страницы делает эту диаграмму корректной для меня, но все остальное всегда распространяется вплоть до края (в случае моих данных, которые я хочу только заполнить пространство из span9 div. В этом случае я использовал макетные диаграммы, но это та же идея.
Здесь JSFiddle: http://jsfiddle.net/dw9tn/
Мои вопросы для всех вас:
1.) Это только я?
2.) Что именно происходит, когда вкладки активируются? Если посмотреть на загрузку css, это, похоже, касается отображения: none и display: block, но у меня нет хорошего понимания того, как это работает в этом случае.
3.) Является ли это важной проблемой или проблемой начальной загрузки? Я заметил, что это произошло со мной с нехарактерными элементами (например, показ твитов на боковой панели), поэтому я склоняюсь к бутстрапу.
4.) Есть ли какое-либо решение, которое вы можете найти, чтобы все было согласовано?
Спасибо, ребята!
