Twitter Bootstrap 100% height accordion "jump"

html css twitter-bootstrap collapse
Brett Postin picture Brett Postin · May 20, 2013 · Viewed 11.2k times · Source

I'm trying to implement a 100% height accordion using the Twitter Bootstrap collapse component, exactly as described in this question.

I'm manually setting the heights of the .accordion-inner elements as described in this answer.

However I'm experiencing "bouncy" behaviour when expanding/collapsing the panels. I have removed all padding/margin/border from the .accordion-inner elements to eliminate that possibility.

It is most noticeable in IE10, however the problem is also evident in Chrome.

See this example.

Any ideas what is causing this "jumpy" behaviour?

Answer

TheHud picture TheHud · Aug 1, 2014

Late to the party, but:

I had a similar problem, and noticed that if I removed a margin-top from the element below the collapsing one, and replaced it with padding-top, the transition was smooth.

So - check for margins on adjacent elements, and try replacing them with padding, if possible.

Related questions

sb admin 2 menu doesn't collapse when i edit some content

i'm working to edit some content for this bootstrap theme: http://startbootstrap.com/template-overviews/sb-admin-2/ when i delete some content from the index.html file the left side bar navigation menu has been expanded and didn't collapse again. here is …

Read More
How to use bootstrap to hide one of div when zoom browser windows size smaller

I use bootstrap to design my web UI , and now I have a requirement as below: I define the below div structure as their div ids are : part1 and part2 <div class="container"> <div class="panel panel-default"&…

Read More
Boostrap 4 Navbar Collapse Menu Right Align

I am using Bootstrap 4 and I am trying to make the menu that pops up by clicking the collapse button to open on the right side instead of the left. I have tried using "ml-auto" on the "ul" element. The …

Read More