<style>
.dhx_sample-container {
width: 100%;
}
.dhx_layout-cell-content {
width: 100%;
height: 500px;
overflow-y: auto;
overflow: visible;
}
.dhx_tree {
overflow: scroll;
}
.custom-class .dhx_tabbar-tab-button--active {
background-color: rgb(2, 136, 209);
color: white;
}
.custom-class .dhx_tabbar-header-active {
background-color: #ff5252;
}
</style>
</head>
<body>
<header class="dhx_sample-header">
<div class="dhx_sample-header__main">
</div>
</header>
<section class="dhx_sample-container">
<div class="dhx_sample-container__widget" id="tabbar_container"></div>
<div id="layoutObj" style="position: relative; width: 600px; height: 400px;"></div>
</section>
<script>
var tabbar = new dhx.Tabbar("tabbar_container", { mode: "top",
tabWidth: 400,
tabHeight: 50,
css: "dhx_widget--bordered custom-class",
views:[
{ id: "1", tab: "Prod Servers"},
{ id: "2", tab: "Test Servers"},
{ id: "3", tab: "Dev Servers"}
]
});
tabbar.setActive("2");
var myTestLayout = new dhx.Layout(null, {
gravity:true,
css: 'dhx_layout-cell-content',
cols: [
{ id: "TestTree", header: "Test Servers", width: "25%" },
{ id: "TestTreeDetails",header: "Test Server Backup Details",width: "75%" }
]
});
tabbar.getCell("2").attach(myTestLayout);
var myTestLayoutTree = new dhx.Tree(null,{
icon: {
folder: "fa fa-server",
openFolder: "fa fa-server",
file: "fa fa-tv"
},
css: 'dhx_tree',
});
myTestLayoutTree.data.load("./TestTreeData.json");
myTestLayout.getCell("TestTree").attach(myTestLayoutTree);
</script>
</body>
That tree is not scrolling inside layout