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

Splitter 100% Height Weirdness

3 Answers 263 Views

Splitter

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

Ashleigh L asked on 01 Feb 2016, 07:56 PM

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:

<body>

<div id="jsParentContainer">

<div id="splitter">

<div id="tree_pane" class="pane-content">

<div id="nav_tree">/div>

</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>

</div>

</body>

And the splitter init:

function createSplitter() {

$('#splitter').kendoSplitter({

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:

<style>

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%; }

</style>

Splitter 100% Height Weirdness

3 Answers, 1 is accepted