CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapflexbox
Steven
Steven

Reputation: 45

Using flex-grow:1 push the div outside of the parent container when using with bootstrap collapse

I am creating an accordion using bootstrap 3. What I want is the accordion's height is always fixed no matter how its content is. If the content of an element is too large then a vertical scrollbar should appear inside that element. Also, when user click an element's header that element should take the rest of the height of the wrapper (and display scrollbar if the rest of height is not enough).

I change flex-grow:1 when user click on the panel-header. However, when clicking "Collection 2" the scrollbar didnt appear inside the content-body of "Collection 2" as I expected and the accordion is pushed outside of the wrapper div. Could you please help? I prefer a css only solution if possible. Thanks.

The template is:

 <body ng-app="accordion" ng-controller="ctrler as ctrl">
    <div id="wrapper" class="full-height wrapper">
       <div class="panel-border panel-group column-flex full-height" id="accordion">
         <div ng-repeat='key in [1,2,3]' class='panel panel-default'>
            <div class="list-group-item">
               <a class="panel-title" data-toggle="collapse" data-target="#{{key}}" data-parent="#accordion" ng-click='onClick($event)'>Collection {{key}}</a>
            </div>
            <div class="panel-collapse collapse content-body" id="{{key}}">
              <div class="panel-body">
                <ul class="list-unstyled">
                  <li ng-repeat="item in data1">
                    <div>{{item}}</div>
                  </li>
                </ul>
              </div>
            </div>
         </div>
       </div>
    </div>
 </body>

The styling is :

  .column-flex{
    display : flex;
    flex-direction: column;
  }

 .wrapper {
   height: 500px;
   border-style: solid;
 }

The code to add flex-grow is: 

      if($(e.target).parents('.panel').css('flex-grow')==1){
            $element.find(".panel").css('flex-grow',0);
      }else{
            $element.find(".panel").css('flex-grow',0);
            $(e.target).parents('.panel').css('flex-grow',1);
      }

You can check the example here : https://plnkr.co/edit/iqrHG80GXj8teiRGeBU8?p=preview.

Upvotes: 1

Views: 2081

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371003

Add this to your code:

.panel {
  display: flex;
  flex-direction: column;
}
.collapse.in {
  overflow-y: auto;
}

revised plunkr

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

If you want a scrollbar to appear when the height of .wrapper is exceeded, add overflow: scroll; to .wrapper. But that will show a scrollbar for .wrapper, not individual panels in the accordion. If you want a scrollbar to appear for the individual panel in the accordion, apply a height and overflow: scroll; to each .panel-collapse where you want the scrollbar to appear.

Upvotes: 0

Related Questions