React-table: Dropdown Button inside cells and overflow hidden

[pinkynrg]

Good morning,

I'm trying to insert a dropdown button inside a cell. Due to the overflow hidden on both the row and the table container the menu is getting cut out almost completely.

I faced the very same issue with another react dynamic table and initially I managed by removing the overflow hidden only for the cells in the "menu column" but that would have lead to other issues.

do you guys know a decent way to insert a button inside the last cell of the row that when clicked opens up a bootstrap dropdown menu?

Thanks

[mikedevita]

you need to override the overflow styling on the row and cell.

[pinkynrg]

I understand that it is an option. I was wondering if there were ways with no side effects.

[jehrlich]

set the style attribute of the ul element to position = 'relative', like

    ul {className: "dropdown-menu", key: 'li',  style: {position: 'relative'}},

[pinkynrg]

@mikedevita For what is concerns the overflow i did try the edit it and it messes up the table style.

@jehrlich Where should I write that? that is not a style JSON object to use in a react component... what is that? by the way position relative only on the dropdown-menu won't work. Tried with the inspector.

[tannerlinsley]

For cells, there is a default overflow hidden on each cell as a CSS rule. You can easily remove this, and it probably won't do much harm to your content (other than ellipsis overflowing into new lines or just making the columns huge depending on your white-space style for the cell. As for the table body, there is an overflow: auto that makes horizontal and vertical scrolling possible. Removing this would presumable break horizontal responsiveness, and/or removing the vertical overflow would break the table's ability to scroll vertically when needed. This is an age-old problem with putting content in tables that has hoverable tooltips, menus, or anything that may break out of the cell. I'm not sure what other kind of advice to offer in this area. The limits of CSS are pretty rigid here.

[pinkynrg]

Thanks for the detailed reply. I just wanted to make sure the way I was proceeding was the least dangerous. I will close the issue. Thanks again!

_Sent from my Motorola XT1585 using FastHub_