0

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?

Thomas
  • 61
  • 6

1 Answers1

0

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.

Jon Jaques
  • 4,262
  • 2
  • 23
  • 25
  • Awesome, that did the trick. With the basic style, the input is displayed correctly. With bootstrap however, the input is displayed "weirdly". Can CSS fix this or will that require some changes on the Datetime component? – Thomas Feb 08 '18 at 23:16
  • CSS perhaps, but what you're probably looking for is the `.form-control` class provided by bootstrap - see DateTime opts for how to add that class to the input. – Jon Jaques Feb 12 '18 at 16:25