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

how to set right pane's content padding when using horizontal splitter?

0 Answers 159 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Nick Wu
Top achievements
Rank 1
Nick Wu asked on 06 Apr 2012, 04:44 AM
My css 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);
    }
);

No answers yet. Maybe you can help?

Tags
Splitter
Asked by
Nick Wu
Top achievements
Rank 1
Share this question
or