ag-Grid cell containing Bootstrap dropdown menu clips menu

Question

I have an ag-Grid set up to show data with a cell on the right that displays a context menu. This context menu, triggered by a button, uses a Bootstrap dropdown menu. When clicked, the button correctly triggers the display of the menu, but the ag-Grid cell hides the dropdown. I have attempted to force overflow: visible on the parent element as well as the grid cell itself without success. I have even attempted to set a z-index on the parent element and still haven't been able to get it to work. The only slight success I have had is by setting overflow:scroll. I can then see the dropdown if I scroll the contents of the cell. Not exactly user-friendly. Anyone have a suggestion? NOTE: I've already attempted this: CSS: Bootstrap drowpdown hides behind grid cell

Thanks for any suggestions you have!

Answer 1

isPopup only works in editable cells.

To use a bootstrap dropdown in a non-editable cell in ag-grid-community version 19:

1. Apply overflow: visible to .ag-cell, or, better, to a cellClass you apply to the cell in the column definition, e.g. .actions-button-cell
2. Set z-indexes so that the focused row appears above unfocused rows.

The CSS:

.actions-button-cell { 
  overflow:visible; 
}

.ag-row {
    z-index: 0;
}

.ag-row.ag-row-focus {
    z-index: 1;
}

That allows the dropdown to flow outside the cell and row.

If you want to also have the dropdown flow outside the grid, you can add something like this:

.ag-root,
.ag-body-viewport,
.ag-body-viewport-wrapper {
    overflow: visible !important;
}

See plnkr sample

Answer 2

So simple way from the referenced post: isPopup function

isPopup:function(){
  return true;
}

Update : plnkr sample

Worked plnkr sample

Answer 3

It happens when the cell have the style overflow hidden. Override that by adding overflow:visible property In angular2 ag-grid you can add cell style to oveflow:visible

cellStyle: { "overflow": 'visible' }