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

1 posts, 0 answers
  1. Nick Wu
    Nick Wu avatar
    22 posts
    Member since:
    Aug 2005

    Posted 05 Apr 2012 Link to this post

    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);
        }
    );
  2.
Back to Top