Problems unpacking and filling bootstrap

Question

I use transition failures. The code below works, but due to the fact that I have 10px padding in my stylesheet, I see the div collapse, but stop 10px sooner than it should and then disappear. The converse is true when expanding, when the div expands to 10px more than necessary before attaching it 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

Easy - just add another div inside the collapse that has style

Answer 2

You need to wrap your content in .collapse, and if you want to indent, you can set the 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; } 

Answer 3

If you do not want to change the structure of HTML, add the following styles:

 /* Override bootstrap collapse to keep margins */ .collapse.in { display: inherit; visibility: visible; } .collapse { display: inherit; visibility: hidden; } 

Bootstrap sets the display to none when the animation ends, which removes the entire div, including padding. Setting visibility to hidden does not remove the div, but the height is 0, so everything else is indented.

Ensure that these styles are defined after the loading stylesheet.