Переполнить ячейку таблицы вертикально в горизонтально прокручиваемой таблице

Question

Я пытаюсь развернуть раскрывающийся компонент React и сделать его видимым за пределами таблицы. Стол должен быть с горизонтальной прокруткой. Я использую компонент реагировать на выпадающий список. Вот кодекс, который я сделал, чтобы указать на проблему (https://codesandbox.io/s/great-banach-48yt5)

Изменение внешнего свойства Div с

overflow: auto

На

overflow-x: auto;
overflow-y: visible

не работает. Указано в: { ссылка }

Есть мысли?

Answer 1

Если вы придерживаетесь пакета реагировать на выпадающий список, имеет опцию для отображения выпадающего в портале .

в вашем индексе. . html, создайте новый элемент над вашим root:

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

и передайте его как опору в вашем Select:

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

Рабочий пример