css - 当祖 parent 溢出时显示日期时间选择器 : hidden

Question

让我们从一个例子开始: https://codesandbox.io/s/ym96l09x3j

如您所见，最后一列正在呈现 DateTime 组件。但是，单击输入不会显示日期选择器。

那是因为 .ReactTable .rt-td 类应用了“溢出:隐藏”样式。

我搜索了一些解决方案并找到了这个:CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

他们基本上说，如果祖 parent 有“溢出:隐藏”，我们需要将 child 的位置设置为绝对。应该正确显示具有绝对位置的孙子(在我们的例子中是 DatePicker)。

有没有人知道如何实现这一点？

Answer 1

尝试将此添加到您的 CSS:

.rdt.rdtOpen {
  position: absolute;
}

RDT 在单元格获得焦点时添加类 .rdtOpen 并在其他情况下将其删除，因此应该可以解决问题。