Calculate margins about react-collapse HOT 6 CLOSED

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.

from react-collapse.

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.

from react-collapse.

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/

from react-collapse.

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.

from react-collapse.

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.

from react-collapse.

from react-collapse.