Splitter in Collapse Panel

2 posts, 0 answers
  1. Jeff
    Jeff avatar
    1 posts
    Member since:
    Apr 2017

    Posted 05 May 2017 Link to this post

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



    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>
        <!-- /.end see more -->


    <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">
          .Panes(verticalPanes =>
                  .HtmlAttributes(new { id = "top-pane" })
                        .HtmlAttributes(new { style = "height: 100%;" })
                        .Panes(horizontalPanes =>
                                .HtmlAttributes(new { id = "left-pane" })
                                .Content(@<div class="pane-content">
                                            <h3>Inner splitter / left pane</h3>
                                            <p>Resizable and collapsible.</p>
                                .HtmlAttributes(new { id = "right-pane" })
                                .Content(@<div class="pane-content">
                                            <h3>Inner splitter / right pane</h3>
                                            <p>Resizable and collapsible.</p>

  2. Ianko
    Ianko avatar
    1940 posts

    Posted 09 May 2017 Link to this post

    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. 

        $("#collapse1").one("shown.bs.collapse", function (ev) {

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top