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