3

I'm trying to expand a React dropdown component and make it visible outside of the table. The table has to be horizontally scrollable. I'm using the react-dropdown-select component. Here is the Codepen I made to indicate the problem (https://codesandbox.io/s/great-banach-48yt5)

Changing the outer Div property from

overflow: auto

To

overflow-x: auto;
overflow-y: visible

Doesn't work. Indicated in : https://stackoverflow.com/a/6433475/9358897

Any thoughts?

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Jeroen Hauchecorne
  • 31
  • 4

1 Answers1

0

If you're sticking with the react-dropdown-select package, it has an option to render the dropdown within a portal.

In your index.html, make a new element above your root:

<div id="portal"></div>
<div id="root"></div>

And pass it as a prop in your Select: 

<Select
  style={{ width: "150px" }}
  dropdownHeight="120px"
  dropdownPosition="top"
  options={options}
  labelField="username"
  valueField="email"
  portal={document.getElementById("portal")}
/>

Working example

eMontielG
  • 396
  • 1
  • 7