Nested Kendo splitter fails

[Anamika]

Hello,

my requirement is parent splitter has 2 vertical panes. Top pane has serach box and search button, lower vertical pane should have 2 horizontal pane and each horizontal pane should have 2 vertical panes each. First 2 steps worked fine but when i am splitting left horizontal pane to 2 vertical panes those 2 panes show horizontally and not vertically. Here is my razor view code, what am i possibly doing wrong

@(Html.Kendo().Splitter()
      .Name("objvertical")
      .Orientation(SplitterOrientation.Vertical)
      .Panes(objverticalPanes =>
      {          
          objverticalPanes.Add()
             .Size("50px")
             .HtmlAttributes(new { id = "obj-top-pane" })
             .Resizable(false)
             .Collapsible(false)
             .Content(@<text><div class="pane-content">Suchen:
 @Html.TextBox("searchbox")<input class="k-button" id="searchBtn" type="submit" value="Suchen" /> <input class="k-button" id="selectBtn" type="button" value="OK" style="width:45px" onclick="SelectObject();" />
                                         </div></text>);
           objverticalPanes.Add()
              .HtmlAttributes(new { id = "obj-bottom-pane" })
              .Scrollable(false)
              .Collapsible(false)
              .Content(
                Html.Kendo().Splitter()
                    .Name("horizontal")
                    .HtmlAttributes(new { style = "height: 100%;" })
                    .Panes(horizontalPanes =>
                    {
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "top-pane" })
                            .Size("320px")
                            .Scrollable(false)
              .Collapsible(false)
                            .Content(
                            Html.Kendo().Splitter()
                    .Name("vertical")
                    .HtmlAttributes(new { style = "height: 50%;" })
                    .Panes(verticalPanes =>
                        {
                         verticalPanes.Add()
              .Size("100px")
              .HtmlAttributes(new { id = "middle-pane" })
               .Collapsible(true)
              .Content(@<div class="pane-content">
                            <h3>left top</h3>
                            <p>Resizable only.</p>
                        </div>);

          verticalPanes.Add()
              .Size("100px")
              .HtmlAttributes(new { id = "bottom-pane" })
              .Content(@<div class="pane-content">
                            <h3>left bottom</h3>
                            <p>Non-resizable and non-collapsible.</p>
                        </div>);
     }).ToHtmlString()

                    );

                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "right-pane" })
                            .Content(@<div class="pane-content">
                                        <h3>right most</h3>
                                        <p>Resizable only.</p>
                                      </div>);

                    }).ToHtmlString()
              );




      })
     )
Attached image left top and bottom show side by side
Anamika

[Anamika]

please ignore this post  .Orientation(SplitterOrientation.Vertical) tag was missing inside