After applying the collapse behavior to a panel element, I noticed that the animation stops abruptly at the padding of .panel-body, causing it to snap instantly to height. This issue can be observed in the basic example on codepen: http://codepen.io/FiveSixTwo/pen/NRQLPo
<div class="container">
<div class="panel panel-default">
<div class="panel-heading" role="button" data-target="#test" data-toggle="collapse">Test Heading<span class="btn-collapse-header glyphicons glyphicons-chevron-up"></span></div>
<div id="test" class="panel-body collapse in" aria-expanded="true">
<p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
non varius purus aenean nec magna felis fusce vestibulum.</p>
<p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
non varius purus aenean nec magna felis fusce vestibulum.</p>
<p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
non varius purus aenean nec magna felis fusce vestibulum.</p>
</div>
</div>
</div>
Semi solution:
.panel-body {
padding: 0;
p {
padding: 15px 15px 0;
&:last-of-type { padding-bottom: 15px; }
}
}
This temporary fix involves removing the padding from .panel-body, but it's not ideal as it may require extensive CSS adjustments throughout the app.
My goal is to maintain the padding on .panel-body while ensuring a smooth collapse animation without any sudden changes in height.
In my pen, I have commented out the solution CSS to demonstrate the issue more clearly.
One straightforward approach could be enclosing everything within another div with padding, although this isn't significantly better than the semi-solution. I'm looking for a universal CSS or even JS solution, but haven't found one yet.
While Bootstrap has its advantages, the more I work with it and expand my app, the less satisfied I am with its limitations.