Я пытаюсь настроить макет с двумя столбцами, где левая область фиксирована, а основное содержимое является гибким. Я видел здесь несколько ответов, которые, как правило, работают. Однако есть некоторое странное поведение, когда я использую «jsTree» в своей «левой» области и вкладки пользовательского интерфейса jQuery в основной области/области содержимого.
html
<div id="main">
<div id="left">
<div id="tree">
</div>
</div>
<div id="right">
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
</ul>
<div id="a">
<h3>A is here</h3>
</div>
<div id="b">
<h3>B is here</h3>
</div>
<div id="c">
<h3>C is here</h3>
</div>
</div>
</div>
CSS
#left {
float: left;
width: 200px;
overflow: auto;
}
#right {
margin: 0 0 0 200px;
}
javascript
$(document).ready(function() {
$('#right').tabs();
$('#tree').jstree({
"plugins" : [ "json_data", "themes"],
"json_data" : {
"data" : [
{
"data" : "A node",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" : "li.node.id" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
});
});
Проблема, с которой я сталкиваюсь, заключается в том, что когда я расширяю дерево (слева), вкладки справа начинают становиться напуганными. Область, содержащая вкладки (элемент, который я считаю), растет вертикально.
Взгляните на этот пример здесь: http://jsfiddle.net/codecraig/gBUw2/