Splitter height based on content

[Guillaume]

Hi,
I have a simple layout : a menu (Telerik) and below it a splitter which contains two horizontal pane. The first pane contains a treeview (Telerik) and the second a form.
By default the splitter has a height of 300px provided by the css. When expanding the treeview nodes, the height gets bigger than 300px (but less than the screen height) and i have a vertical scrollbar appearing inside the splitter. I've tried changing the splitter height so that it's not fixed and gets the content's height but i don't seem to find a good solution.
Anyone knows how to do this ?

Thanks,
Guillaume

[Alex Gyoshev]

Hi Guillaume,

There is no easy way for the splitter to resize depending on its contents. Wouldn't a full-screen splitter work in your scenario?

Regards,
Alex Gyoshev
the Telerik team

[Levi]

Why not? When I use firebug to remove the "height: 300px" from each of the t-pane's style attributes, the splitter conforms to the height of my ajax loaded content.

My problems is I can't get the splitter to not render the height attribute inside the style elements of the panes. Setting the HtmlAttributes property for the panes doesn't do anything. I did notice that when I set the height in the HtmlAttributes of the Splitter itself, that value is rendered in the height of the style tag for each of the panes. Yaay! I should be able to set the height to auto and bingo! No.. doing that, or height 100% deflates the entire splitter. Further investigation revealed that either of these two settings actually render the style of the panel to a height: 0. Why could it just.. not add a height property to the style of the panels? Doing this in FireBug appears to fix the issue all together.

[Levi]

This is a step in the right direction, but there seems to still be overlapping of content underneath any expanded content in the splitter. I think it has something to do with the panes being absolutely positioned.

$(document).ready(function () {
    $(".t-pane").css("height", "auto");
});

[Dimo]

Hello,

The Splitter has not been designed to support automatic-height panes, because one can use plain styled <div>s for that (and no JS is required). In theory, you can force panes to expand as much as needed by setting a height: auto !important; style, but this will lead to unwanted side effects, such as misplaced splitbars. You will also need position:static !important;

The discussed behavior may be achievable, but only in specific scenarios.

Best wishes,
Dimo
the Telerik team

[Varghese]

I also noticed the height problem in my application. I have three containers and the splitter control is inside them. I can't change the height of the splitter externally through the HtmlAttribute.

The solution seems to be manipulating the DOM via JQuery.

[Alex]

You're absolutely right Varghese.  I was able to create a solution with the following javascript:

//hook this into your splitter OnLoad event
function DetailSplitter_OnLoad(e) {
    //$('#' + e.target.id) could be used to manipulate the splitter as well
    AdjustDetailSplitterHeight();
}

function AdjustMySplitterHeight() {
    //adjust the splitter
    var splitter = $("#MySplitter");
    var adjustContstant = 60; //change this to suit your particular page.
    var newSplitterHeight = $(window).height() - splitter.position().top - adjustContstant;
    splitter.css("height", newSplitterHeight + "px");

    //adjust anything else you want here

    splitter.resize();
}

//used to debounce
//http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed
var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

//browser window resize support
//MUST BE RUN AFTER MARKUP
//also fixes http://www.telerik.com/community/forums/aspnet-mvc/splitter/layout-with-razor-syntax-at-100-issue.aspx
if ($("#MySplitter").length) {
    $(window).resize(function () {
        delay(function () {
            var splitter = $("#MySplitter");
            if (splitter.length) {
                AdjustDetailSplitterHeight("#MySplitter");
            }
        }, 200);
    });
}

[Shawn]

Thanks this worked for me.