Comments (9)
from react-collapse.
Hi , Is this issue fixed?
from react-collapse.
Sorry for holding with this issue.
When container has display: flex
height is calculated incorrectly and every step of animation gets "instant height" toggled from 0 to real height. That is not an easy thing to solve - could not get it fixed right away unfortunately and flied away to ReactConf. I am now coming back so hopefully have more time to look at it.
As a quick solution I would suggest to avoid setting flex to Collapse element itself. Set it to either its parent or child node like in here: http://codepen.io/nkbt/pen/ZWzpYN?editors=101
I understand that it might not be a solution in some cases, but "fixing" Collapse behaviour for flex element might not be possible (for current implementation of Collapse).
from react-collapse.
@nkbt I ended up getting this error using react-height
without react-collapse
. Only flex
container was numerous levels up.
from react-collapse.
Yeah, height is not being properly determined on flex
container.
Sorry everyone for the delay with fixing this issue (and other ones). I was working heavily on a backend/devops and did not do any UI work for last ~7 months. Now I am doing UI again and will be able to work on this (well, will have to anyway, as all these UI libs are going to be heavily used). Thanks for your patience and help!
from react-collapse.
@nkbt No worries! I appreciate the work -- it has helped me figure out my own basic solution that seems to be working (so far 😄 ) for my current use case: https://github.com/nathanmarks/material-ui/blob/stepper-updates/src/internal/ExpandTransitionChild.js
from react-collapse.
Cool 👌
from react-collapse.
Closing, most likely will be fixed by #72
Hard to tell since I cannot reproduce this anymore
from react-collapse.
Will add an example case...
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.