Thank you in advance for any feedback!
I am trying to have one left pane and two middle pane split on the middle. So one vertical left splitter and one horizontal splitter.
So far this is the code that I have, it does the split ok but it doesn't show in the whole page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="vertical" style="height: 100%; width: 100%" >
<!--<div id="top-pane">-->
<div id="horizontal" style="height: 100%; width: 100%;">
<div id="left-pane">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
<div id="center-pane">
<div class="vertical">
<div id="center-top">
<div class="pane-content">
<h3>Inner splitter1 / center pane</h3>
<p>Resizable only. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</div>
<div id="center-bottom">
<div class="pane-content">
<h3>Inner splitter2 / center pane</h3>
<p>Resizable only.</p>
</div>
</div>
</div>
</div>
<!--</div>-->
</div>
</div>
<script>
$(document).ready(function() {
$(".vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, size: "80%" },
{ collapsible: false, size: "20%" }
]
});
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, size: "100%" },
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: false, size: "400px" },
{ collapsible: false },
{ collapsible: true}
]
});
});
</script>
<style>
#vertical {
height: 100%;
margin: 0 auto;
}
#middle-pane {
background-color: rgba(60, 70, 80, 0.10);
}
#bottom-pane {
background-color: rgba(60, 70, 80, 0.15);
}
#left-pane, #center-pane, #right-pane {
background-color: rgba(60, 70, 80, 0.05);
}
.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>
</html>
1 Answer, 1 is accepted
I see that the div#example element has no height, therefore, the #vertical element cannot inherit the body's height. Also, body and html element are not decorted with 100% height in order for the splitter to take the entire page. Here you are an article on the topic: http://docs.telerik.com/kendo-ui/controls/layout/splitter/how-to/expand-splitter-to-100-height.
And here you are a Dojo with the splitter setup you sent: http://dojo.telerik.com/ADoBE.
Regards,
Ianko
Telerik by Progress