React-virtualized: Dropdown DateTimePicker on header not show: z-index issue

[davidychow87]

I added a DateTimePicker (from react-widgets) onto a column header, however when it drops down, the date selection widget doesn't get shown:

Below is the basically the code I've used (minus some other logic and styling). I added the DateTimePicker in the headerRenderer of the Column component:

<Column 
   .....props
   headerRenderer={this.headerRenderer}
/>

//headerRenderer function
headerRenderer = ({dataKey, label}) => {
    return (
        <div>
            {this.Label(label)}
            <div>
                 <DateTimePicker ...props />
            </div>
        </div>
    );
}

I've tried changing the z-index for the div wrapping DateTimePicker and also the headerStyle on the Table component, but the dropdown calender is still hidden. Is there any way to make it show over the rows?

[mpmeyer]

@davidychow87 were you able to resolve this? How? Thx.

[davidychow87]

@mpmeyer No sorry, I changed the design to have the DateTimePicker in another elsewhere outside of the header. Never figured it out.

[joshlongerbeam]

@mpmeyer I just hit this issue today.

The problem is the header row element has style="...overflow: hidden;..."

I fixed it by adding the following to my css

.ReactVirtualized__Table__headerRow {
  overflow: visible !important;
}

The !important is necessary to override the element style.