Comments (5)
I've found that under certain CSS conditions (VenueContentMap
has padding set, or some collapse children has margin which "leak" outside of collapse) collapse height does not match content height and it never gets to the "IDLING" state (which is the time it fires "onRest").
This needs to be fixed of course, or at least some warning logged, but meanwhile try to remove paddings/margins from Collapse-related containers and see if it is working. Also you can set a breakpoint in the componentDidUpdate
in case you want to see that it is never moved into an IDLING
state.
Initially onRest was just exposed onRest from react-motion, though in the last rewrite it is invoked when Collapse itself is idling.
from react-collapse.
Thanks for the quick reply. Actually I am not using any margins or padding, or weird CSS for that matter. Initially I loaded Google Maps in there, but I removed that to see if it worked.
This is my reduced test case which still doesnโt work:
<Collapse onRest={() => console.log('onRest')} onHeightReady={() => console.log('height ready')} isOpened={isMapShown} fixedHeight={400}>
<div className="VenueContentMap-inner"></div>
</Collapse>
.VenueContentMap {
height: 400px;
background: white;
}
.VenueContentMap-inner {
height: 400px;
}
Any help is appreciated.
from react-collapse.
I just tested by removing the fixedHeight
attribute, and that seemed to work. Maybe an edge in your calculations?
from react-collapse.
Most likely =(.
At the moment if you fix height of content, you don't really need fixedHeight
option. I reckon it might have sense to simplify the code of collapse itself, to set height of inner content
component instead of changing logic. There are no extra calculations anyway (it had some sense in previous implementation, but after rewrite it seems like no real gain)
from react-collapse.
As new [email protected] is released https://github.com/nkbt/react-collapse/releases/tag/v5.0.0 this issue has been most likely already solved.
Please feel free to re-open if the issue persists
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.