Comments (6)
Look at this tiny fix: http://codepen.io/nkbt/pen/avRXPZ?editors=001
Adding overflow: hidden
to wrapper div, "fixes" it. Like.... Really. That works. But it is an edge case, not a generic solution =(.
This is why I'd prefer to add a section to the README with these cases, examples and possible solutions. I believe it would be better approach.
from react-collapse.
I prefer to add this into Gotcha section of readme rather then calculate them myself. That would decrease speed. though can be quite easily solved by wrapping either children or Collapse itself.
I can be wrong though, just did not find the case where margins cannot be avoided using Collapse.
from react-collapse.
Yeah it can be worked around with adding padding to the container, or anything else that gets rid of collapsing margins. Here's an example of how it gets dorked http://codepen.io/souporserious/pen/a060aeb382b647b32deb73346ac9de76/
from react-collapse.
The problem with margins is that they are "collapsing". Having two elements stick to each other vertically - their margins will overlay. And that works not all the time. They also "leak" outside of elements (in your example H1 margins leak outside of wrapper div). There are some hacks to fix that in place, but I'd avoid trying to fix them "in general". Rather then "polyfilling" conceptually broken css, I'd prefer to add some usage restrictions. Especially considering they are not that ridiculous, just cutting off some edge cases.
from react-collapse.
Sorry for commenting on this, but adding a div with overflow:hidden
works for the margin issue but doesn't work well with the keepCollapsedContent
option. It seems like only the wrapper div is kept, while the children inside are not and throws various errors while interacting with them.
from react-collapse.
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.