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?

I have checked in Chromium and the "bounce" at the bottom still exists. — Brett Postin, May 20 '13 at 11:54
Yeah, you are right didn't notice it.. But bad news is there are also a "bounce" in the boostrap docs : check it out http://twitter.github.io/bootstrap/javascript.html#collapse — Xavier, May 20 '13 at 13:42
Yes I see what you mean. It's not as common so I didn't notice it, and thought it might be something to do with me trying to make it height 100%. — Brett Postin, May 20 '13 at 14:00
see http://stackoverflow.com/a/33697157/2208713 - I tried all the workaround answers given for this question and found this answer that actually worked in this other thread. It boils down to not directly padding the expanding section (e.g. panel-body) but using a container div instead which has the padding — Andy Lorenz, Apr 08 '16 at 11:10

score 14 · Accepted Answer · answered Jul 31 '14 at 23:02

14

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.

answered Jul 31 '14 at 23:02

TheHud

347
3
10

1

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` – MeltingDog Jun 16 '16 at 23:46

score 3 · Answer 2 · edited May 23 '17 at 10:29

3

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

edited May 23 '17 at 10:29

Community

1
1

answered May 20 '13 at 11:19

Carol Skelly

351,302
90
710
624

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? – Brett Postin May 20 '13 at 12:00
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" – Carol Skelly May 20 '13 at 12:04
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... – alexandernst Oct 20 '20 at 11:09
1

@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. – Carol Skelly Oct 20 '20 at 12:23

score 0 · Answer 3 · answered May 02 '15 at 18:33

0

HTML:

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a>
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS:

 .collapse.in{
    padding-bottom:5px;
 }

answered May 02 '15 at 18:33

Fabio

64
2
9

score 0 · Answer 4 · answered May 23 '16 at 14:53

I was having this weird behavior where the accordion would expand to a much larger height than the actual visible content, and then collapse (jump) back to the actual visible content height.

Turns out that my accordion body for that panel had a few empty html elements, which, in my case were a few divs with col-sm-4 class and nothing inside them. Once I commented them out this jumping behavior stopped. Hope this helps someone with similar problem.

100% height accordion "jump"

4 Answers4

Linked