Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collapse has a jumpy transition when the collapsing element has padding #12093

ohaibbq opened this issue Jan 4, 2014 · 5 comments


Copy link

ohaibbq commented Jan 4, 2014

Tested on OSX Mavericks

  • Chrome Version 31.0.1650.63
  • Firefox 26.0

Reduced test case:

The obvious workaround is give the padding to a child element of the collapse target. This seems a bit silly that it's necessary, though.

Copy link

mdo commented Jan 5, 2014

There's no way around this because of the global box-sizing: border-box. Padding affects the height of the element, so when the collapsing element goes from whatever height it's at to height: 0, it has the padding in there. Then the display: none; kicks in and it skips out of view.

@mdo mdo closed this as completed Jan 5, 2014
Copy link

There's no way around this because of the global box-sizing: border-box

That isn't necessarily true. Yes, the border box causes paddings to be respected, but "no way around this" isn't true.

The height is being increased/decreased via JS animation, you can calculate the paddingTop and paddingBottom values and increase/decrease those with the height.

This is a very, very annoying bug.

Copy link

econic commented Apr 24, 2014

putting a div around that element and collapsing that instead fixes that in most cases, but you could solve this issue really easy by just using .css( "height" ) rather than .height().
+1 for fixing

Copy link

@mdo, can you re-open this please.

edit: @econic nifty, didn't catch that difference between .css('height') and .height(). Good to know :)

Copy link

mikeazo commented Dec 3, 2014

@econic Thanks for the div suggestion. I was having this issue, removed the padding from the collapse div and put a new div around my content with the padding. Works perfect.

@twbs twbs locked and limited conversation to collaborators Dec 4, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet

No branches or pull requests

5 participants