Splitter not showing when page first loads

[Lisa]

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

[Dimo]

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