Specify a 'collapse height'

[lucastobrazil]

Hey, love this!!
just wondering if it'd be possible to set a collapse height, so that instead of collapsing to 0, it could be Xpx high still? I'd like to use it as a text truncation / minimization tool

Thanks :)

[nkbt]

Thanks!

There even was a pr for that but I don't really want to add separate
feature since it is super easy to do. Just keep collapse always open and
toggle internal div height from fixed value to auto (with overflow:visible)
:). Collapse will adjust height smoothly cutting your actual content on the
way

We need to add an example though

[lucastobrazil]

Ahh yes I see. Thanks!
I guess if I'm using collapse always open, there's not much point in using the collapse component anyway, right? Might take a look deeper into your component and just use the animation part of it. Otherwise it'd be confusing to use a collapse component that never actually collapses, right?

[nkbt]

Well, whole collapse is about animation, so you are not getting too much of
an extra. I'd still recommend to use it =)

[lucastobrazil]

Ah but I think it'll be confusing to have a "Collapse" component that's set to always "open" then place a toggle inside of that to actually do the collapsing. I suppose I could call it something else like so it's not as confusing.

I have done this but the div inside

[catalinfeier]

@nkbt So how exactly would you get the fixed height for the internal div? I tried something like this:

const height =  this.props.showAll ? "test1" : "test2";
return (
<Collapse    isOpened={true}    className="collapsable"      onHeightReady={this.onHeightReady}>
    <div className={height}>{content}</div>
</Collapse>
)

and

.test1{height:auto;}
.test2{height:150px;overflow: hidden;}

However, this only works when going from showing clipped content to showing all the content, and not vice versa.

The content is a list of 1 to 4 elements, and initially i am required to show only the top 150px of the first element (so i can't just add/remove elements from the list).

[nkbt]

@catalinfeier ah I see what you mean... That looks like a legit case here. In new alpha version you can specify min-height for internal container (via theme classname), so when it closes it would stop on that and not go to full zero. kind of temporary workaround until some better implementation. Maybe extra prop collapsedHeight or something (defaulted to 0) would do.

[catalinfeier]

Another thing i tried that somewhat worked (may help somebody else) is to use the fixedHeight property:

const optionalProps =  this.props.showAll ? {}: {fixedHeight: 150};
<Collapse
            isOpened={true}
            {...optionalProps}
            className="collapsable"
            onHeightReady={this.onHeightReady}>
  {content}
</Collapse>

The animation seems to be working correctly. The only problem is that using this solution only triggers the onHeightReady prop exactly once, so the hook works only once. Afterwards, only going from showing all content to showing clipped content works (in regards to hooks, the animation still happens, but it happens off-screen if it's at the bottom of the screen).

Any other ideas?
Also, how can the alpha version be accessed?

[nkbt]

npm install react-collapse@alpha

[nkbt]

Almost correct readme is in master https://github.com/nkbt/react-collapse/tree/master

[nkbt]

Your solution with switching to fixedHeight might work with alpha, though I've never tried this case.

[catalinfeier]

@nkbt is there a specific npm/node version required for the alpha installation? tried with node 5.0 and 6.0 and i got No compatible version found: react-collapse@alpha

[nkbt]

@catalinfeier sorry my bad

 'dist-tags': { latest: '2.3.3', next: '3.2.0' },

So either react-collapse@3 or react-collapse@next would do