Setting dynamic height to 'auto'

[federico-bellucci]

I'm using Collapse plugin to create a collpasable div. It works but it doesn't animate. I think it is because the plugin set the height to 'auto'. Why this happens? Can I fix it without setting the height manually?

<Collapse isOpened={this.props.isVisible}>
    <div id="bigPictureAccordion">
        <div className="col-sm-5">
            <div className="text">
                <div className="head">
                    Welcome <a className="name" href="">{this.props.user}</a>
                </div>
                <div dangerouslySetInnerHTML={{__html: this.props.text}}/>
            </div>
        </div>
        <!-- the following div contains background image -->
        <div className="col-sm-7 no-padding coverImg"></div>
    </div>
</Collapse>

[nkbt]

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)

[federico-bellucci]

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

Thanks for your help

[federico-bellucci]

Hi. Have you found a solution?

[nkbt]

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

[nkbt]

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

[nkbt]

Sorry for late reply, was quite busy these days.

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

[federico-bellucci]

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

[nkbt]

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

[nkbt]

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

[nkbt]

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

[federico-bellucci]

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