z index in table header

[foodaka]

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; } }

[futbolistua]

I have the same issue. It happens when container has overflow hidden. So will this behavior be fixed?

[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.

[foodaka]

ok thanks for the reply

[ghost]

This is not a feature, is a major bug.

[Chikel]

I have the same issue with overflow: auto.

[ex3ndr]

Any ETA on this? This is very important for many apps.

[simonpinn]

👍

[sabbiu]

What is the progress in this? I am also looking for this use case.

[devthejo]

me too with react-table

[sabbiu]

@TakioN I was also looking for it to work with react-table. This helped me, #810 (comment)

[devthejo]

@sabbiu thank you for the info

[DonkovtsevArthur]

getTableProps={() => {
return {
style: { overflow: 'visible' }
};
}}
getTbodyProps={() => {
return {
style: { overflow: 'visible' }
};
}}
getTdProps={(state, rowInfo, column) => {
const { id } = column;
return {
style: id === 'idForMyColumnWithSelects' ? { overflow: 'visible' } : {}
};
}}

[devthejo]

@DonkovtsevArthur great, thanks for the info

[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.

[wrichman]

Would someone be able to post a working example of the two together?

[meldaban]

Yo tenia este problema, estoy usando material table, y lo solucione configurando el estilo del header del zIndex porque estaba en 10 y lo puse en cero.

<MaterialTable
options={{
headerStyle:{backgroundColor: '#767E9F',color: 'white', fontWeight:'bold' , zIndex:0}
}}