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

Closed
ohaibbq opened this issue Jan 4, 2014 · 5 comments
Closed

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

ohaibbq opened this issue Jan 4, 2014 · 5 comments
Labels
css

Comments

@ohaibbq
Copy link

@ohaibbq ohaibbq commented Jan 4, 2014

Tested on OSX Mavericks

  • Chrome Version 31.0.1650.63
  • Firefox 26.0

Reduced test case:
http://jsfiddle.net/q8D56/1/

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.

@mdo
Copy link
Member

@mdo 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 Jan 5, 2014
@markcarver
Copy link

@markcarver markcarver commented Mar 12, 2014

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.

@econic
Copy link

@econic 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().
http://api.jquery.com/height/
+1 for fixing

@markcarver
Copy link

@markcarver markcarver commented Apr 24, 2014

@mdo, can you re-open this please.

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

@mikeazo
Copy link

@mikeazo 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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.