React-virtualized: AutoSizer always returns 0, 0 in a simple sized div

[jide]

Hi !

In its simplest form, AutoSizer always returns 0, 0. The surrounding node is a div with dimensions. Nothing fancy here, just reproduced the most basic example.

Here is a test case :
https://plnkr.co/edit/rMCYuKhdRLVVKTUJzbQF?p=preview

[jide]

Hmmm, okay it seems to return 0, 0 first and then the correct dimensions, although in the DOM the div has its width and height set as 0.

I guess this is the expected behavior ? (If so, would be great to see that mentioned in docs !).

[bvaughn]

Hi @jide,

Have you seen this docs page: https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#why-is-my-autosizer-setting-a-height-of-0

If you have ideas on how to improve the docs, please submit a PR 😄

[sajinshrestha]

I had the same problem using AutoSizer within the flex container. This solution almost helped, I had to add height: 100vh for it to work.

<div style={{ display: 'flex' }}>
  <div style={{ flex: '1 1 auto' , height: '100vh'}}>
    <AutoSizer>     
     ....
    </AutoSizer>
  </div>
</div>

[bvaughn]

Thanks for sharing your solution @sajinshrestha

I suspect in your case that you may have a parent of the flexbox div that doesn't have a height set. Which in this case will cause the descendants to remain collapsed. Easy way to debug this is to walk up the DOM tree and set an obvious style like background color. If you don't see anything change when you set your style, you know the element is collapsed. 😄

[sajinshrestha]

@bvaughn Thank you for expanding on this.

I suspect in your case that you may have a parent of the flexbox div that doesn't have a height set.

Correct, so I was trying to set the height by using height: 100% but that didn't work.
height: '100vh' did the trick. Thanks.

[Catherine-honegger]

@bvaughn - This issue has returned with the latest deployment - we have pinned our package to 9.21.0 in order to make it work

[CaptainCuddleCube]

@bvaughn
To expand on Catherine's comment, we are getting 0 width and 0 height passed into out function, and it's exploding things. This error is only in 19.21.1, and not in 19.21.0.

The error message itself is not helpful either and I'm not sure if this can be improved?
Invalid index and all that. at LinearLayoutVector.start (index.js:613)

Please re-open this ticket.