Children of AutoSizer can't overflow

[anshul-kai]

First of all, thank for this amazing library. It is one of the most amazing things I have come across in a very long time.

I'm using the AutoSizer with a List like below. The row content in my case needs to overflow beyond the bounds of its parent. The only way I could make this work was by changing the position to static and removing will-change on the grid. Doing so disables the scrolling functionality. I feel like this may be a Catch 22 and just wondering if there are any suggestions or improvements that could be made to accommodate such a use case.

Thank you!

<AutoSizer>
    {({ height, width }) =>
      <List
        {...{
          width,
          height,
          rowHeight: 62,
          rowCount: items.length,
          rowRenderer: rowRenderer(items)
        }}
      />
    }
  </AutoSizer>

[bvaughn]

Thank you for the kind words, @a-koka.

As you've observed, you can't do something like overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). But you may be able to accomplish what you want using a portal technique (eg a library like tajo/react-portal).

This is usually what I recommend for people wanting to put things like drop-down menus inside of react-virtualized rows. This allows the menu content to expand outside of a single row (or even the entire List) without being clipped.

I think this issue is not actionable on my side so I'm going to close it. I'll be happy to answer any follow up questions you have though. Cheers~

[anshul-kai]

Thanks a lot for your recommendation @bvaughn. It did the trick!

Apologies for the non-actionable question here. I was hoping that you would have a much more appropriate answer than what I would could on StackOverflow.

Much appreciated.

Cheers!

[bvaughn]

Glad to hear it!

I actually get emails from Stack Overflow whenever someone asks a question tagged with react-virtualized. I always answer them. 😉