I'm trying to get a window that contains a (fixed size) top and bottom bar, and the central portion sizable with a splitter; with the whole thing scaled to fill the entire browse window.
I'm using the below, which was based on reading of this: http://jsfiddle.net/j5edh/
The resizing doesn't seem to work at all; the bottom bar disappears. I've tried may different variants and I don't seem to be getting anywhere fast. The bottom DIV seems to get resized to a height of 0px, as if it's trying to constrain the whole view to a fixed height.
What am I doing wrong?
--
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="vertical">
<div id="title-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
<div id="middlePane">
<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="right-pane">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
</div>
</div>
<div id="bottom-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, resizable: false, size: "100px" },
{ collapsible: false, resizable: true },
{ collapsible: false, resizable: false, size: "100px" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, resizable:true, size: "220px" },
{ collapsible: true, resizable:true, size: "220px" }
]
});
$(window).resize(function() {
resizeSplitter()
});
resizeSplitter = function() {
splitter = $("#vertical")
.data("kendoSplitter")
.size("#middlePane", $(window).height() - 200 + "px");
kendo.resize($("#middlePane"));
};
});
</script>
<style scoped>
#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'm using the below, which was based on reading of this: http://jsfiddle.net/j5edh/
The resizing doesn't seem to work at all; the bottom bar disappears. I've tried may different variants and I don't seem to be getting anywhere fast. The bottom DIV seems to get resized to a height of 0px, as if it's trying to constrain the whole view to a fixed height.
What am I doing wrong?
--
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="vertical">
<div id="title-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
<div id="middlePane">
<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="right-pane">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
</div>
</div>
<div id="bottom-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, resizable: false, size: "100px" },
{ collapsible: false, resizable: true },
{ collapsible: false, resizable: false, size: "100px" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, resizable:true, size: "220px" },
{ collapsible: true, resizable:true, size: "220px" }
]
});
$(window).resize(function() {
resizeSplitter()
});
resizeSplitter = function() {
splitter = $("#vertical")
.data("kendoSplitter")
.size("#middlePane", $(window).height() - 200 + "px");
kendo.resize($("#middlePane"));
};
});
</script>
<style scoped>
#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 Nigel,
This jsFilddle demo is very old and uses an outdated Kendo UI version and a resizing method. Moreover, the resizing algorithm works the opposite way (from the inside to the outside, while it should normally work the other way), which brings up unnecessary complexity. The proper way to achieve the desired behavior is provided in our documentation. Since the Spltiter is a child of the page <body>, no additional event handlers or Javascript is required.
http://docs.telerik.com/kendo-ui/getting-started/changes-and-backward-compatibility#changes-from-2013-q2-sp1-(2013.2.918)
http://docs.telerik.com/kendo-ui/getting-started/web/splitter/overview#make-the-splitter-expand-to-100%-height
Regards,
Dimo
Telerik
This jsFilddle demo is very old and uses an outdated Kendo UI version and a resizing method. Moreover, the resizing algorithm works the opposite way (from the inside to the outside, while it should normally work the other way), which brings up unnecessary complexity. The proper way to achieve the desired behavior is provided in our documentation. Since the Spltiter is a child of the page <body>, no additional event handlers or Javascript is required.
http://docs.telerik.com/kendo-ui/getting-started/changes-and-backward-compatibility#changes-from-2013-q2-sp1-(2013.2.918)
http://docs.telerik.com/kendo-ui/getting-started/web/splitter/overview#make-the-splitter-expand-to-100%-height
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!