This is a migrated thread and some comments may be shown as answers.

100% Window Height Splitter

11 Answers 1758 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

11 Answers, 1 is accepted

Accepted

answered on 20 Sep 2011, 12:37 PM

KendoUI-2011-2-826.zip

Hi Richard,

The information in my previous reply was a little misleading. The Splitter will expand to 100% height, but will not resize on subsequent window resizes. The autosizing functionaliry has been implemented after the initial Kendo beta release.

The demo below will work as expected. I have also attached a newer Kendo build, which does not require any additional Javascript apart from the widget initalization.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Kendo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css" />

<style>

html,

body

{

height:100%;

margin:0;

padding:0;

}

html

{

overflow:hidden;

}

</style>

</head>

<body>

<div id="splitter" style="height:100%;border:0;">

<div>

top pane

</div>

<div>

bottom pane

</div>

<script>

function triggerResize() {

$("#splitter").data("kendoSplitter").trigger("resize");

}

$(document).ready(function() {

$("#splitter").kendoSplitter({

orientation: "vertical"

});

$(window).resize(triggerResize);

});

</script>

</body>

</html>

Kind regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 28 Apr 2014, 08:24 AM

Hi all,

You are welcome. Please note that the resizing mechanism and responsiveness of all Kendo UI widgets has been improved and unified for Q1 2013 and the information in this forum thread is outdated. Manual resize triggering is now done with the resize() method. Using trigger("resize") with new Splitter versions will not lead to any result.

http://docs.telerik.com/kendo-ui/getting-started/changes-and-backward-compatibility#kendo-ui-2013-q3

http://docs.telerik.com/kendo-ui/getting-started/web/splitter/overview#resizing-a-splitter-manually

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!

answered on 08 Aug 2014, 01:39 PM

Hi Dimo,

Thanks for your quick answer. Having height at 100% wasn't practical. I ended up doing:

<div id="splitter" style="border: 0;">

$(document).ready(function() {

s= $("#splitter").kendoSplitter({

orientation: "horizontal",

resize: function(e){

var h = $("#splitter").find(".k-pane")[0].scrollHeight;

$('.k-pane').height(h);

$('.k-splitbar').height(h);

},

panes: [ { scrollable: false }, {} ]

}).data('kendoSplitter');

});

Which does the trick. Your comments are welcome.

Kind Regards,

Doug