Comments (9)
Also run into the fixed wrapperStyle
issue. The child component has recieved the correct dimensions as props, but is wrapped in a parent that has it's height and width set to zero, thus never shows up. In the example below, the fullwidth-graph-container
is 876px by 200px and can see these correctly passed down. It's just that wrapper that spoils the party. Removing the inline styles makes it appear normally. -alpha2
could add an option to remove or alter these values?
from react-dimensions.
I ran into the same issue. Looking at the documentation in the source code, it seems as if options.containerStyle
was intended to control the style of the wrapper div. However, this option is not used in the latest version of the package. Would be great if we could again change the wrapperStyle!
Thanks for all your work, this is a very helpful package.
from react-dimensions.
2.0.0-alpha passes the dimensions of the parent element as props, as opposed to passing the dimensions of the wrapper div as props. The previous way was causing many issues on here, particularly with flexbox layouts. The hope is that this way is more intuitive, but it is not documented yet (hence alpha) and I want to see how it works for people. The idea is that you style the parent (ancestor) of the react-dimensions div, or create your own div. The idea of the styling {overflow: 'visible', height: 0, width: 0}
is to make the wrapper div not affect layout at all.
This will require CSS / DOM changes (hence breaking v2 change) but I'm interested to get feedback on how it works after changing code?
from react-dimensions.
Thanks for the quick response! I think I understand what you are trying to accomplish. The problem for me is that height: 0
messes up my styling compared to the case when there are no styles at all applied to the wrapper div, as it causes the div I am wrapping to overflow and hence its contents overlap with subsequent divs. Without this height property, the divs stack correctly as I would expect given their block-level nature. How would I fix this without touching the style of the wrapper div?
from react-dimensions.
May I ask how you are using it? I always assumed people were using react-dimensions to style the width and height of its direct children, so I hadn't considered this case.
from react-dimensions.
Sorry for not being clear. I am indeed using react-dimensions
to style the width and height of its direct children. Simplified, my markup looks like this:
<div>
<div style="overflow: visible; height: 0px; width: 0px;">
<MyWrappedComponent style={{ width: this.props.containerWidth }}>
(...)
</MyWrappedComponent>
</div>
<div><p> This sentence will overlap with the contents of MyWrappedComponent </p> </div>
</div>
Is it clearer now what my problem is?
Thank you for your help!
from react-dimensions.
In this case maybe try putting a wrapper div around react-dimensions? I think v2 might be a bit of an only child, and doesn't like siblings.
from react-dimensions.
Hello, I was off for a while. I'm using react dimensions to set height of table that is created by another package(material-ui) and it's not direct child. Could you advice me how to change wrapper style in this case? direct child have heigh 100% and width as well.
And later i'll use it to draw some svg using d3 so i'll need pass height and width to that as well and again it won't be direct child. At least I think right now.
from react-dimensions.
In my use case I am using react-dimensions to programmatically trigger some functionality upon resizing to mobile. The height:0; width:0
is giving me issues as well due to flexbox. What should be a full sized footer is now taking up only 50px wide and stretching down +5000px.
from react-dimensions.
Related Issues (20)
- Fallback when requestAnimationFrame is unavailable HOT 3
- IE9 compatibility HOT 5
- disableHeight & disableWidth HOT 2
- requestAnimationFrame support HOT 1
- ReactDOMServer stops rendering on react-dimensions decorated components
- add LICENSE
- Initial render has window size HOT 6
- documentation issues
- get 0 for "this.props. containerHeight" HOT 2
- Describe how to use 2.0.0-alpha1 HOT 5
- 不兼容 ie内核的浏览器吗?
- Question about enzyme/mocha tests HOT 4
- use hoist-non-react-statics HOT 1
- I want to know the compatibility of this component HOT 1
- Looking for maintainers HOT 9
- Allow element type of wrapper to be configurable
- getWrappedInstance broken
- The component that asks for dimensions should be rendered even if the dimensions are nil
- Not working with redux connect
- Np
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-dimensions.