Setting dynamic height to 'auto' about react-collapse HOT 11 CLOSED

That might be related to some awkward global styling done by Bootstrap or #bigPictureAccordion.

Height-auto is necessary to get real content height of children components, you can completely avoid it by setting fixedHeight to Collapse. But I reckon this is exactly what you don't want to do.

Css is hard, global css is sometimes impossibly hard.

I can debug that for you and probably come with some more universal fix, if you can kindly provide with some Codepen example (or some repo I can run and reproduce the issue)

from react-collapse.

http://codepen.io/anon/pen/NGzpbB?editors=001

Thanks for your help

from react-collapse.

Hi. Have you found a solution?

from react-collapse.

I did some code cleanup, updated deps to the most recent versions, and most importantly switched to using state and ReactDOM.render. That seems to fix the problem http://codepen.io/nkbt/pen/JYBQaw

I'll check if that would work with the old version too...

from react-collapse.

Ah also you hide element when it is not visible. That obviously won't work.

For some reason (older) 1.1.2 Collapse is not re-rendered. It even does not get props! Which means React ignores changes..

from react-collapse.

Sorry for late reply, was quite busy these days.

I'm closing the ticket, feel free to re-open if you have more concerns

from react-collapse.

I can't see any animation in your snippet :(

from react-collapse.

Oh wow, there is definitely something with Bootstrap styles. Depending on screen width it works sometimes. Like when screen is narrow enough. I'll dig a bit more. But before I will update react-collapse since it looks like I've solved a pretty big problem there today, which might help

from react-collapse.

Okay, I see it. The problem is with floating elements inside Collapse.

Since col-* elements are floating and ReactCollapse + ReactHeight each add a single container (not floating and not clear-fixed of course), ReactHeight's container has height 0, so animation goes from zero to zero and after that height becomes auto.

At the moment I reduced number of wrapping divs to the bare minimum and can't remove ReactHeight's div for now (also can't allow to style it). I guess it might be possible to overcome this issue and keep only one ReactCollapse's div (which is completely styleable), but cannot promise that will happen soon.

If you put your .row element inside ReactCollapse, everything should work fine then.

I updated my fork in this way and it now works fine http://codepen.io/nkbt/pen/JYBQaw?editors=001

from react-collapse.

I could potentially add {overflow: 'hidden'} for ReactHeight element, but that means if you have anything inside collapse that should be visible (I actually have this case in one the projects, like Close button that goes slightly off the collapsible element) - it will be cut off. That's not good and I guess it is worse then not to use floating elements inside

from react-collapse.

Putting the row div inside the collapse component can be a good workaround.
Thank you

from react-collapse.