styleWrapper cannot be changed in 2.0.0.alpha1

[fHudek]

Hello,

in my component i just need to calculate height so I change getDimensions to
getDimensions: (element) => { return ['auto' ,element.clientHeight] }.

Afterwards height is calculated correctly, but my element is not visible because its ancestor has width set to 0 and for some reason overflow: visible is not helping.

I changed wrapperStyle from:
var wrapperStyle = {
overflow: 'visible',
height: 0,
width: 0
};

to:
var wrapperStyle = {
height: 'auto',
width: 'auto'
};

and it works nicely afterwards.

Are you planning on adding possibility to change wrapperStyle?

Thanks for great work.

Ferdinand

[Planeshifter]

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.

[gmaclennan]

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?

[Planeshifter]

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?

[gmaclennan]

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.

[Planeshifter]

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!

[gmaclennan]

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.

[fHudek]

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.

[samkelleher]

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?

[Redmega]

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.