[SOLVED] Display Datetime picker when grand-parent has overflow: hidden

Display Datetime picker when grand-parent has overflow: hidden

Let's start with an example: https://codesandbox.io/s/ym96l09x3j

As you can see, the last column is rendering a DateTime component. However, clicking on the input doesn't show the date picker.

That's because the .ReactTable .rt-td class has a "overflow: hidden" style applied to it.

I've searched for some solution and found this: CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

They basically say that if the grand parent has the "overflow: hidden", we need to set the child's position to absolute. The grand-children (in our case the DatePicker) who has the absolute position should be displayed correctly.

Does anyone have any clue on how to achieve this?

Solution

Try adding this to your CSS:

.rdt.rdtOpen {
  position: absolute;
}

RDT adds the class .rdtOpen when a cell is focused and removes it otherwise, so that should do the trick.