Splitter not showing when page first loads

2 posts, 0 answers
  1. Lisa
    Lisa avatar
    35 posts
    Member since:
    May 2011

    Posted 22 Jul 2013 Link to this post

    Hi - I have a page with 4 charts and 3 splitters.  One splitter is vertical between the 2 charts on the top and the 2 charts on the bottom.  There are also 2 horizontal splitters - 1 between the charts on the top and 1 between the charts on the bottom.

    My problem is that when the page loads, I only see the top 2 charts and 2 of the splitters correctly.  It looks like the third splitter is partially there.

    I've attached a document with two screen shots.  The top screen shot has a red box around the bit of the splitter I can see.  When I move it, the other two charts render as shown in the bottom screen shot

    What do I have to do to get all 4 charts to render when the page loads?

    Here is the code creating the splitters:
    ksAllCharts = $("#AllCharts").kendoSplitter({
              orientation: "vertical",
              panes: [
                  { size: "40px", scrollable: false, resizable: false },
                  { size: "300px", scrollable: false },
                  { size: "100%", scrollable: true }
              ],
              layoutChange: onAllChartsLayoutChange
          }).data("kendoSplitter");
     
          ksCharts1 = $("#charts1").css("height", "100%").kendoSplitter({
              orientation: "horizontal",
              panes: [
                  { size: "50%", scrollable: false },
                  { size: "50%", scrollable: false }
              ],
              layoutChange: onChartsLayoutChange
          }).data("kendoSplitter");
     
          ksCharts2 = $("#charts2").css("height", "100%").kendoSplitter({
              orientation: "horizontal",
              panes: [
     
                  {size: "50%", scrollable: false },
                  { size: "50%", scrollable: false }
              ],
              layoutChange: onChartsLayoutChange
          }).data("kendoSplitter");


    And the code for the page layout:
    <ul id="panelBar">
        <li>Testing a new page
            <div id="comparativeDashboardPanelContents">
                <div id="AllCharts">
                    <div>
                        <h1 class="top-header">testing a new page</h1>
                    </div>
                    <div id="chartsPane1">
                    <h2 class="top-header">chart area 1</h2>
                        <div id="charts1">
                            <div id="OFPBySchool"></div>
                            <div id="OFStuPBySchool"></div>
                        </div>
                    </div>
                    <div id="chartsPane2">
                    <h2 class="top-header">chart area 2</h2>
                        <div id="charts2">
                            <div id="StuCountsRiskBuckets"></div>
                            <div id="SchoolCrosstab"></div>                  
                        </div>
                    </div>
                     
                </div>
            </div>
        </li>
    </ul>

    Thanks for any help, I'm really new to this.

    Lisa
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 Jul 2013 Link to this post

    Hello Lisa,

    Please make sure that each Splitter element is visible at the time the widget is initialized. The provided code snippet does not give definite clues why the bottom Splitter does not adjust its layout properly. If you need further assistance, please send a runnable demo.

    In addition, please note that 100% high elements cannot have siblings. The <h2>'s should be either removed or inserted in separate Splitter panes.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top