Premium forums

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

• Nick Wu

  
  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);

      }

  );