Resizing KendoUI Splitter To Fill Screen Vertically

I dropped the jQuery.Layout plugin in favor of KendoUI’s Splitter control yesterday. Kendo’s Splitter is just so much easier to use and more flexible. It was a no-brainer for me, really.

But I ran in to a problem: how to resize the splitter so that the “main” content of my app would resize vertically, while keeping the header and footer at a set, specific size? Fortunately, Burke Holland came to my rescue! And, as I expected, it’s a simple solution.

Resize The Splitter On Window Resize

$("#vertical").kendoSplitter({
    orientation: "vertical",
        panes: [
            { collapsible: false, resizable: false, size: "100px" },
            { collapsible: false },
            { collapsible: false, resizable: false, size: "100px" }
        ]
    });

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true },
        { collapsible: false },
        { collapsible: true }
    ]
});

$(window).resize(function() {
    resizeSplitter()
});

var resizeSplitter = function() {
    var topHeight = 100;
    var bottomHeight = 100;
    var centerHeight = $(window).height() - (topHeight + bottomHeight);

    var splitter = $("#vertical").data("kendoSplitter");
 
    splitter.size("#topPane", topHeight + "px");
    splitter.size("#middlePane", centerHeight + "px");
    splitter.size("#bottomPane", bottomHeight + "px");
    
    splitter.trigger("resize")
};

Simple enough, right? Just pay attention to the $(window).resize event, calculate the size of the main content area, and call resize on the splitter.

The Live Demo

Here’s the JSFiddle Burke created for me, in all it’s awesomeness:

To actually see this working, you’ll want to visit the fiddle directly and then resize your window.

I did make a few small changes to the resize method from the original JSFiddle that I’m showing, in my gist above. In order to keep the top and bottom panes the same size all the time, I added a resize on them in the function. Otherwise, when you shrink the screen really small and then make it really large again, the top and bottom sections tend to be hidden. I also cleaned up a few global var leaks and fixed an error triggering the reset event for the version of Kendo I’m using.

Post Footer automatically generated by Add Post Footer Plugin for wordpress.