Bootstrap collapse and padding issue

Question

I'm using the collapse with transitions. The code below works but because I have 10px padding in my stylesheet I see the div collapse but stop 10px before it should and then vanish. The reverse is true on expanding as the div expands to 10px greater than it should before snapping back to the correct size.

HTML

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox">
                            Lorem ipsum ...
</div>

CSS

.box-content{
    background: red;
    padding: 10px;
}

Answer 1

You have to wrap your content in .collapse and if you want to have padding, you can set CSS of your wrapper.

HTML

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox">
  <div class='wrapper'>                  
    Lorem ipsum ...
  </div>
</div>

CSS

.wrapper{
  padding: 10px;
}