CSS: Bootstrap drowpdown hides behind grid cell

Question

Hi Have a grid implemented third-party library AG-Grid. This grid has editable feature to edit rows.

And while editing I am rendering Bootstrap dropdown to update value of Year column as shown in below example:

Editable Grid - Dropdown Issue

When I click on the dropdown its li elements are not displaying properly as it is hidden behind the grid.

Is there any solution for this ?

Answer 1

This is a bit old, but for anyone else looking:

If you set the isPopup() function on your cell editor to return true you shouldn't have to fight with the CSS of the component. Allows the dropdown to render over the other cells without any CSS edits.

If you want your editor to appear in a popup (such as a dropdown list), then you can have it appear in a popup. The popup will appear over the cell, however it will not change the contents of the cell. Behind the popup the cell will remain intact until after editing is finished which will result in the cell being refreshed.