Posted 05 Apr 2012 Link to this post
html, body
{
height
:
100%
;
margin
0
padding
font-size
13px
}
html
overflow
hidden
<
div
id
=
"splitter1"
style
"height: 100%; border: 0"
>
"top_pane"
></
"middle_pane"
"splitter2"
"height: 100%; width: 100%;"
"nav_pane"
"padding: 5px"
> //padding works well
"nav"
"border:1px solid red;"
> </
</
"content_pane"
"padding:5px"
> //padding right works not well !!! why?
"content"
"bottom_pane"
$(document).ready(
function
() {
var
splitter1 = $(
"#splitter1"
).kendoSplitter({
orientation:
"vertical"
,
panes: [{ size:
"30px"
, resizable:
false
}, {}, { size:
"20px"
}]
}).data(
"kendoSplitter"
);
splitter2 = $(
"#splitter2"
"horizontal"
panes: [{ collapsible:
true
, size:
"200px"
}, {}]
triggerResize =
splitter1.trigger(
"resize"
splitter2.trigger(
$(window).resize(triggerResize);