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

100% Window Height Splitter

11 Answers 1647 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 12 Sep 2011, 07:43 PM
What's the best way to get a 100% window height splitter?

Having tried unsuccessfully with pure CSS I managed to get it working with what feels like a bit of a hack:

$("#splitter").height($(window).height() - 2);

i.e. setting the splitter div to the window height using javascript. I also had to subtract 2 pixels for what I assume is CSS border or padding on the Kendo UI styles.

Any input welcome.

11 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Sep 2011, 10:40 AM
Hello Richard,

The best way to proceed in your case is to set

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

You must take into account that elements with a percentage height require their parent to have explicit height too. In other words, if the Splitter is the topmost element inside the <body>, then the <body> and the <html> elements must have a 100% height applied.

No Javascript will be required.

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!
0
Richard
Top achievements
Rank 1
answered on 19 Sep 2011, 05:09 PM
Thanks for your reply.

Do you have an HTML/CSS example of this to hand?

While I can get some success in IE, Firefox isn't having it and simply shows a blank screen.

Regards,

Richard
0
Accepted
Dimo
Telerik team
answered on 20 Sep 2011, 12:37 PM
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>
<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>
</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!
0
Richard
Top achievements
Rank 1
answered on 20 Sep 2011, 04:54 PM
Thanks Dimo,

After your example didn't work first off, I realised that I also had to set the height of the form to 100% as the splitter is running within a ASP.Net page. Working fine now.

Regards,

Richard
0
Rob
Top achievements
Rank 1
answered on 27 Mar 2012, 04:28 PM
This is great and works a treat, many thanks.
0
Garry
Top achievements
Rank 2
Veteran
answered on 25 Apr 2014, 04:19 PM
Thanks Dimo ;-)
0
Dimo
Telerik team
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!
 
0
Doug
Top achievements
Rank 1
answered on 08 Aug 2014, 12:22 PM
Hello Dimo,

I'm using kendo splitter with boostrap 2.3 with a top nav. If I follow your indication, the splitter has full height, which is great. The issue is as soon as I move the handle, it sticks to top the top of the page, behind the nav. 

Could you possibly help?

Doug
0
Dimo
Telerik team
answered on 08 Aug 2014, 12:58 PM
Hi Doug,

I am not sure I understood well what is your scenario and layout.

If the Splitter has siblings, it cannot be 100% high and you will need to take care of calculating and setting its height initially and on every browser window resize. Then, call the Splitter's resize() method (please refer to the links in my previous reply).

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Doug
Top achievements
Rank 1
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
0
Dimo
Telerik team
answered on 08 Aug 2014, 02:30 PM
Hello Doug,

Resizing Splitter panes manually is not recommended. If you need to make manual adjustments, then resize the Splitter itself and call its resize() method, as our documentation suggests:

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

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Splitter
Asked by
Richard
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Richard
Top achievements
Rank 1
Rob
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
Doug
Top achievements
Rank 1
Share this question
or