z index in table header

Hi there, cant seem to find this anywhere. I have my react select in a table header. and the content does not flow above the table row when select is open.

ive tried many variations of still cant get it. any suggestions?

.select-hack { position: relative; width: 100%; margin-bottom: 20px; border-collapse: separate; :global .Select { position: absolute !important; width: 100%; z-index: 999 !important; } }

[cmbasnett]

For me, this fixed it up:

<ReactTable
    {...}
    getTheadFilterThProps={(state, rowInfo, column) => {
        return {
            style: { overflow: 'visible' }
        };
    }}
/>

This makes all filter columns have the overflow visible style, allowing you to see the dropdowns.

[agirton]

Hi @foodaka and @futbolistua we don’t have plans to fix this for 1.0 as it would require a bigger change to the project. As @futbolistua pointed out this issue happens if the container has overflow hidden. In order to fix this the dropdown would have to be a fixed element and be programmatically positioned based on the input area.