Calculate margins

[souporserious]

Margins that spill out of the container are not taken into account in the height calculation. I know Velocity handles this by just animating the margin, which can be done, but wanted to see how you feel about this.

[nkbt]

I prefer to add this into Gotcha section of readme rather then calculate them myself. That would decrease speed. though can be quite easily solved by wrapping either children or Collapse itself.

I can be wrong though, just did not find the case where margins cannot be avoided using Collapse.

[souporserious]

Yeah it can be worked around with adding padding to the container, or anything else that gets rid of collapsing margins. Here's an example of how it gets dorked http://codepen.io/souporserious/pen/a060aeb382b647b32deb73346ac9de76/

[nkbt]

The problem with margins is that they are "collapsing". Having two elements stick to each other vertically - their margins will overlay. And that works not all the time. They also "leak" outside of elements (in your example H1 margins leak outside of wrapper div). There are some hacks to fix that in place, but I'd avoid trying to fix them "in general". Rather then "polyfilling" conceptually broken css, I'd prefer to add some usage restrictions. Especially considering they are not that ridiculous, just cutting off some edge cases.

[nkbt]

Look at this tiny fix: http://codepen.io/nkbt/pen/avRXPZ?editors=001

Adding overflow: hidden to wrapper div, "fixes" it. Like.... Really. That works. But it is an edge case, not a generic solution =(.

This is why I'd prefer to add a section to the README with these cases, examples and possible solutions. I believe it would be better approach.

[ingro]

Sorry for commenting on this, but adding a div with overflow:hidden works for the margin issue but doesn't work well with the keepCollapsedContent option. It seems like only the wrapper div is kept, while the children inside are not and throws various errors while interacting with them.

[nkbt]

Yeah, it is not working well so it is not a solution indeed. Easy fix - just use padding, not margins. Works perfectly for last 10 years. CSS...