New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Autosizer does not work with react-window #249
Comments
The auto sizer component definitely works with this library. Check out the FAQs: Sorry you haven't gotten much of a response from Stack Overflow, but I think that's still the right place to go for this sort of question (assuming you've read the FAQs first 😉) |
As you said that it definitely works, can you pls guide me why it is not working for me? I have already read the FAQs, but the problem is height and width is zero due to which no image is displayed on the page unless I use window.innerHeigth/Width. I have pasted my code on SO and I don't know what's wrong with it because docs are not helping much. |
Running in the same issue here. I absolutely doe not get it to work. Changing the code for debugging:
when I use AutoSizer from the dedicated package ( When I use it from Completely blows my mind why it doesn't work (the codesandbox example works on the same browser) |
the same issue! have you found solution? |
Also getting the exact same issue. Switching to the version included in react-virtualized fixes the issue, but I'd also prefer to use it standalone w/ react-window. |
I'm having the same issue here. |
I was able to get |
so in the source code it looks like if there is no calculated width on the element, it just simply doesn't render the children. i still have to play with the actual implementation, but it seems like as long as my container has a size (whether fixed or using flex or something), it will render the output hope that helps others |
I am having the same issue using TypeScript.
EDIT: Found a fix. The Instead, it exports the following as a default class: You can import this as |
I had the same problem with height being 0, and it turned out that its parent(s) need to have a fixed size in order for it to work. From the docs It would be great if we could pass a prop to override this behaviour and have the AutoSizer stretch the parent to its size. |
Having same problem as well. |
I am having the same issue how do you fix it? |
I'm using the standard import { AutoSizer } from 'react-virtualized' |
Same issue for me. AutoSizer sets height as 0 when using with react window. I am also using AutoSizer from react virtualized with react-window. |
Can I use AutoSizer within a flex container?When using an AutoSizer as a direct child of a flex box it usually works out best to wrap it with a div, like so:<div style={{ display: 'flex' }}>
<!-- Other children... -->
<div style={{ flex: '1 1 auto' }}>
<AutoSizer>
{({ height, width }) => (
<Component
width={width}
height={height}
{...props}
/>
)}
</AutoSizer>
</div>
</div> |
I struggled with the same errors as you guys, and after a while, I managed to make it work. |
Finally I got the reason. |
great solution, thanks vvasylkovskyi |
AutoSizer
AUTO SIZER! AUTO!!! lol kek chebyrek |
Interestingly, like the @omerkahoot-tr, it also worked for me keeping react-virtualized My scenario is: using AutoSizer (from the react-virtualized-auto-sizer library) and FixedList, when I try to fetch the ref of an outerElementType, it is always undefined. |
I have asked this question on SO. However, I am still waiting for the solution to this problem. Please have a look.
I want to add another question.
I want my collection of images to appear like this
https://m.youtube.com/watch?v=jLtr4tpFKQE&time_continue=15
How can I wrap the images in flex like the above given link example?
Also, Autosizer height and width does not work, I had to use window.innerHeight and window.innerWidth to make it work.
When I stretch browser to different sizes, the collection of images are not responsive means they do not change position unless I scroll up and down.
Link: https://stackoverflow.com/questions/56253318/react-virtualized-auto-sizer-does-not-work
The text was updated successfully, but these errors were encountered: