Splitter 100% Height Weirdness

4 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 01 Feb Link to this post

    I'm trying to set a splitter to 100% height, as per the example here: http://docs.telerik.com/KENDO-UI/controls/layout/splitter/how-to/expand-splitter-to-100-height

    But I'm running into some very strange behaviour, as seen in this video (please ignore the styling, we're in the middle of a system update): http://recordit.co/kE4wBkI3k4

    The video starts on a fresh load of the page. You can see the breadcrumbs, and what appear to be the splitter resize and collapse controls. The rest of the page is empty, even though there should be content. When I click the splitter resize, the content blinks in, and while the splitter is highlighted, it seems bent over/doubled up at the top. At 0:10 I refresh the page again, showing how a new page load is blank, except for the splitter controls. Collapsing the left panel causes the content to appear again. I was having a hard time grabbing the splitter to re-expand the left panel, so I refreshed again (0:23), and dragged it out again to test the resizing of the panels. You'll also notice that I have no scrollbars in the video, despite the fact that the content runs off the bottom of the page.

    Here's my HTML:

        <div id="jsParentContainer">
            <div id="splitter">
                <div id="tree_pane" class="pane-content">
                    <div id="nav_tree">/div>                       
                <div id="tab_pane" class="pane-content">
                    <div id='jqxTabs'>
                        <iframe class="tab-iframe" id="start_iframe" src="" testStudioTag="" width="100%" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>                      

    And the splitter init:

    function createSplitter() {
        orientation: "horizontal",
        panes: [
            {collapsible: true, size: "20%"},
            {collapsible: false, size: "80%"}
        messages: {   //TODO: add translations
            retry: '',
            requestFailed: '',
            loading: ''

    And the CSS I added, as per the help:

        html, body { height:100%; margin:0; padding:0; overflow:hidden; }
        #jsParentContainer { height:100%; margin:0; padding:0; overflow:hidden;}
        #splitter { border-width: 0; height:100%; }

  2. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 02 Feb in reply to Ashleigh L Link to this post

    FYI I've created a support ticket for this issue, so no response is required to this post.
  3. Dimo
    Dimo avatar
    8322 posts

    Posted 03 Feb Link to this post


    The provided HTML markup contains one incorrectly typed </div> tag. Here is an example, which works as expected:


    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 03 Feb in reply to Dimo Link to this post

    It was a typo in the example. There's no broken div in my actual code.
Back to Top