Comments (11)
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)
from react-collapse.
http://codepen.io/anon/pen/NGzpbB?editors=001
Thanks for your help
from react-collapse.
Hi. Have you found a solution?
from react-collapse.
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...
from react-collapse.
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..
from react-collapse.
Sorry for late reply, was quite busy these days.
I'm closing the ticket, feel free to re-open if you have more concerns
from react-collapse.
I can't see any animation in your snippet :(
from react-collapse.
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
from react-collapse.
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
from react-collapse.
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
from react-collapse.
Putting the row div inside the collapse component can be a good workaround.
Thank you
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.