search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

[BUG] Virtuoso doesn't render inside MUI Grid #729

Closed CezCz closed 2 years ago

CezCz commented 2 years ago

Describe the bug Virtuoso renders with 0px width when embedded in MUI Grid component.

Reproduction https://codesandbox.io/s/flamboyant-golick-u4qcxo?file=/src/App.js

Desktop (please complete the following information):

Additional context I tried to wrap Virtuoso in divs with display:block, but it didn't help the issue

petyosi commented 2 years ago

You should debug what's wrong with this horizontal sizing:

image

You can also bring that to MUI, I would not call it a problem in react-virtuoso.

CezCz commented 2 years ago

Hey @petyosi thanks for replying.

I believe however that it still comes from react-virtuoso. I have refined the example and replicated the problem without MUI. Please see https://codesandbox.io/s/flamboyant-golick-u4qcxo?file=/src/App.js

Should I recreate the issue (to be an opened one) or could we still discuss here?

petyosi commented 2 years ago

I believe this is because the root virtuoso element has position: relative, so it does not stretch the container width. position relative is necessary for the internal measurements - I think there might be ways to avoid that, but this is a big effort and likely a breaking change.

CezCz commented 2 years ago

Would you have any workarounds suggestions? That would be great