Comments (12)
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?
from react-collapse.
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
from react-collapse.
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?
from react-collapse.
Well, whole collapse is about animation, so you are not getting too much of
an extra. I'd still recommend to use it =)
from react-collapse.
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
from react-collapse.
@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).
from react-collapse.
@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.
from react-collapse.
npm install react-collapse@alpha
from react-collapse.
Almost correct readme is in master https://github.com/nkbt/react-collapse/tree/master
from react-collapse.
Your solution with switching to fixedHeight might work with alpha
, though I've never tried this case.
from react-collapse.
@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
from react-collapse.
@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
from react-collapse.
Related Issues (20)
- as-prop for Collapse HOT 1
- Fade in/fade out with opacity style on open/close HOT 1
- hasNestedCollapse no longer necessary in v5 yet is used in Nested example HOT 1
- React-collapse does not work on some zoom levels (devicePixelRatio =1.25) Following up #238 HOT 1
- On collapse, .ReactCollapse--collapse element is being completely removed from the DOM
- Animation not working when the Collapse has a parent that it is in modal or something with position fixed HOT 2
- Financing
- The overflow for 'React-collapse--' is overflow:hidden , not overflow:initial for IE11 HOT 2
- Animation doesn't work HOT 5
- Collapse for table row HOT 3
- Starting mix-height HOT 7
- initialStyle not working HOT 3
- Collapse horizontally aligned content HOT 3
- Prop passing suggestion HOT 8
- Block stays expenaded with isOpened=false HOT 4
- Nested collapsible shows animation. Help needed HOT 4
- Collapse/Open all on button click? HOT 1
- Position sticky inside collapse HOT 8
- Is the component still maintained + proposed feature additions HOT 1
- CSS modules in React app won't affect the rendered Collapse HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-collapse.