How to make AgGridReact rows lower z-index

Question

I have a cell renderer that shows an mgt-person fine but the hover mgt-person-card goes behind the following ag-rows.

I tried

.ag-row {
     z-index: -unset !important;
}
.ag-cell {
    overflow: visible !important;
}

and

mgt-person-card {
   z-index: 100000; 
}

Also suppressRowTransform={true}

Any help appreciated Thanks

Answer 1

I'm not sure if this will work for a cell renderer, but I had a similar issue with a cell editor with a custom drop down. The issue occurred after I upgraded from ag-Grid version 24 to version 27. I didn't need to set suppressRowTransform to true or tinker with the CSS to fix it. Instead, in the column definition where I am using the cellEditor I added the property cellEditorPopup and set it to true.