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

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

Comments

Projects
None yet
5 participants
@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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 5, 2014

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@markcarver

markcarver 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.

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

This comment has been minimized.

Show comment
Hide comment
@econic

econic 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

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

This comment has been minimized.

Show comment
Hide comment
@markcarver

markcarver 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 :)

@mdo, can you re-open this please.

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

@mikeazo

This comment has been minimized.

Show comment
Hide comment
@mikeazo

mikeazo 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.

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.