Splitter in Collapse Panel

[Jeff]

I want to put a splitter in a bootstrap collapse panel.  This works fine when the collapse panel is loaded open (ie a class of collapse in).  However when the page loads with the collapse is loaded closed, the splitter does not render.  Is there a way to make this work short of having a document ready function that has $(".collapse").collapse('hide');?

 

Thank-you

Here is the cshtml code.

 

  <div class="panel-heading" style="background-color: #717174;height: 35px;color:white;font-size:11px;width:100%;">
        <div class="panel-title">
         <div class="row">
    <div class="col-md-6">
      <form id="form1" name="form1">
        <div class="input-group input-group-sm input">
                   <span style="color:white;font-size:12px;font-weight:bold;">Account:&nbsp;</span>
            <input id="selacct" class="form-control" name="selacct" placeholder="Search Account #..." style="width:120px;font-size:10px;height:20px;vertical-align:middle;float:none">
       <a href="#" style="color:white;height:20px;"><span class="glyphicon glyphicon-search"></span></a>
             <div class="col-md-1" style="border-left:1px solid #cccccc;">
          <a data-toggle="collapse" href="#collapse1" style="text-decoration:none;color:white;font-weight:bold;font-size:14px;"><span class="glyphicon glyphicon-menu-down"></span></a>
    </div>
    <!-- /.end see more -->
  </div>


             </div>
      </div>

<div id="collapse1" class="panel-collapse collapse col-md-12">
        <div class="panel-body" style="background-color: #999999;height: 250px;color:white;font-size:12px">
    
      @(Html.Kendo().Splitter()
      .Name("vertical")
      .Orientation(SplitterOrientation.Vertical)
      .Panes(verticalPanes =>
      {
          verticalPanes.Add()
              .HtmlAttributes(new { id = "top-pane" })
              .Scrollable(false)
              .Collapsible(false)
              .Content(
                Html.Kendo().Splitter()
                    .Name("horizontal")
                    .HtmlAttributes(new { style = "height: 100%;" })
                    .Panes(horizontalPanes =>
                    {
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "left-pane" })
                            .Size("220px")
                            
                            .Content(@<div class="pane-content">
                                        <h3>Inner splitter / left pane</h3>
                                        <p>Resizable and collapsible.</p>
                                      </div>);
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "right-pane" })
                            
                            .Size("220px")
                            .Content(@<div class="pane-content">
                                        <h3>Inner splitter / right pane</h3>
                                        <p>Resizable and collapsible.</p>
                                      </div>);
                    }).ToHtmlString()
              );
          })
)
            </div>
        </div>

[Ianko]

Hello Jeff,

As the Splitter is initially hidden and dynamically shown, this is considered as a responsive layout. Hence, the resize method should be called on showing the Splitter. 

<script>
    $("#collapse1").one("shown.bs.collapse", function (ev) {
        $("#vertical").data("kendoSplitter").resize();
    })
</script>

Regards,
Ianko
Telerik by Progress