Twitter Bootstrap 100% height accordion "jump"

Question

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?

Solution 1

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.

Solution 2

I think the "jump" you're seeing is due to the CSS transitions for the .collapse class.

If you take a look at this SO thread Turning off Twitter Bootstrap Navbar Transition animation, you can see how to disable the transition with an overriding CSS class 'no-transition'. This doesn't stop the animation all together, but it speeds it up so that the jump is less noticeable...

Add no-transition to your accordion-body elements..

<div id="collapseOne" class="accordion-body collapse in no-transition">

Add the CSS..

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

Updated plunker.. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

Comments

[Brett Postin]

Thanks, but ideally I would like to keep the animation (which I'm no longer seeing). Are you saying that you don't think this is possible?

[Zim]

You could try slowing down the animation by increasing the s on the transitions, but the either way I think the transitions are causing the "jump"

[MeltingDog]

For me it was similar, but it was the margin around the .collapse div. I had a div with two classes: .content and .collapse. .content had margins. I separated the two classes into two separate divs, with .collapse wrapping .content

[alexandernst]

Removing the animation wiIl "fix" the issue in the same way turning off a warning of some sort will fix the issue the warning is warning about. I don't know how a 272k user replied with such an answer...

[Zim]

@alexandernst this was a suggestion for Bootstrap 2.x which hasn't been relevant in recent years. Thanks for taking the time to downvote my suggestion from 7 years ago.