ag-grid renders on top of cell renderer

Question

I've tried just about everything I know to get my custom dropdown cell renderer to display as the topmost div in the agGrid example. I've played with z-index, positioning etc with no luck. The only thing that did anything was going to one of the offending rows and deselecting the transform for that row, but then the row just disappears. Any ideas would would be welcome, Thanks in advance.

Here is a working example : https://stackblitz.com/edit/angular-ag-grid-hides-cellrenderer-5ryv9n

Quick screenshot of issue when menu is within ag-grid

Answer 1

The solution for me was to add suppressRowTransform: true to the grid options and make the rows and cells have overflow: visible

This was using ag-grid-react though.

Answer 2

I have also came across the exact same problem (with ag-grid-react though).

Here is a working solution I've implemented following Frank Wallis's answer above: https://stackblitz.com/edit/react-z7aogy

Why does this work?

1. The cell renderer has a higher z-index than the ag-grid (only when the menu is open) [therefore it also must have a position, other than 'static'] (see ColorCell.js)

2. The ag-grid cell style contains: overflow: visible (see style.css)

3. In gridOptions: suppressRowTransform=true (see Table.js)

Note that this is not perfect. When 2+ menus are open simultaneously, one hides the other. This of course can be solved by making sure that no more than 1 menu is open at any given moment (like a regular select element behaves).

Answer 3

In ag-grid-react recent versions, in your column definitions you can simply add a property 'cellClass' as shown below and the content of that cell can overflow (Worked for me with a tooltip):-

  columnData = [
{
  headerName: 'Column Name',
  field: 'colId',
  width: 260,
  suppressRowTransform: true,
  cellClass: 'overflow-visible'}]

I have provided this answer in case it's helpful for someone new like me to find the place where to put the overflow: visible. (Based on the answers above)