Rank 1
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> </div> </div> </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>3 Answers, 1 is accepted
Rank 1
The provided HTML markup contains one incorrectly typed </div> tag. Here is an example, which works as expected:
http://dojo.telerik.com/onutA
Regards,
Dimo
Telerik
Rank 1