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>
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
0
Hi Rocio,
In order to make a Splitter (and any block html element as a whole) occupy 100% of its container height, you will need to make sure that the height of all Splitter's parents also is set in percentages (up to a parent with a fixed height). Adding the following CSS style to your page should allow all elements to be sized int he desired way:
You can test a live sample demonstrating the same here: http://dojo.telerik.com/@veselinar/egeYe
Regards,
Vessy
Telerik by Progress
In order to make a Splitter (and any block html element as a whole) occupy 100% of its container height, you will need to make sure that the height of all Splitter's parents also is set in percentages (up to a parent with a fixed height). Adding the following CSS style to your page should allow all elements to be sized int he desired way:
#example, html, body { width: 100%; height: 100%; margin: 0; padding:0; overflow: hidden;}You can test a live sample demonstrating the same here: http://dojo.telerik.com/@veselinar/egeYe
Regards,
Vessy
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.