CODEWITHSUNDEEP
reactjsreact-virtualized
Marc Wissler
Marc Wissler

Reputation: 134

How to use a select dropdown in a virtualized list?

Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown.

The problem now: The virtualized list is hiding overflow. So the last items dropdown is not displayed and you cannot scroll down to view the content of the dropdown:

enter image description here

================= Here is where the image ends ================

I have no idea, how I could fix this issue, without changing the virtualized list code. Anybody out there?

Upvotes: 4

Views: 2750

Answers (1)

bvaughn
bvaughn

Reputation: 13497

react-virtualized can't use overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). So things like drop-downs will get clipped as you've observed.

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

I've used tajo/react-portal in the past for this.

Upvotes: 3

Related Questions