I've encountered a problem with my react bootstrap table. The last cell on each row includes a dropdown menu, but the menu gets cut off in the last row due to the overflow:hidden property in the table element. Disabling this property causes another issue where a long highlight passes through the table body height when hovering over a column header. Keeping the overflow hidden is necessary as it keeps the highlight column relative to the table body.
To resolve this issue, I attempted to create a custom dropdown menu using the following structure:
Table component:
<tbody>
{this.state.apps.map((app)=>{
return <AppRow />;
})}
</tbody>
Approw component:
<tr>
<td>cell1</td>
<td>cell2</td>
<td>last cell</td>
<div>dropdown menu</div>
</tr>
This setup prevents the cutoff issue, but the dropdown menu always appears at the top of the first row instead of at the corresponding table row. When clicking on the last row, the dropdown menu does not align correctly with that specific row, appearing at the top of the first table row instead.
Has anyone else experienced this issue and found a solution? Any help would be greatly appreciated!