ag-grid渲染在单元格渲染器顶部

Question

我已经尝试了几乎所有我知道的方法来使我的自定义下拉单元格渲染器显示为agGrid示例中的最高div。我玩过z-index，定位等，没有运气。唯一没有做任何事情的是转到有问题的行之一，并取消选择该行的转换，但随后该行消失了。任何想法都将受到欢迎，谢谢。

这是一个有效的示例：https://stackblitz.com/edit/angular-ag-grid-hides-cellrenderer-5ryv9n

Quick screenshot of issue when menu is within ag-grid

Answer 1

对我来说，解决方案是将suppressRowTransform: true添加到网格选项，并使行和单元格具有overflow: visible

这是使用ag-grid-react。

Answer 2

我也遇到了完全相同的问题（尽管有ag-grid-react）。

以下是我已经实施的有效解决方案，按照弗兰克·沃利斯的上述回答： https://stackblitz.com/edit/react-z7aogy

为什么这样做？

1. 单元格渲染器的z-index高于ag-grid（仅当菜单打开时）[因此，它还必须具有position，除了“静态”]（请参阅ColorCell.js）

2. ag-grid单元格样式包含：overflow: visible（请参见style.css）

3. 在gridOptions中：suppressRowTransform=true（请参见Table.js）

请注意，这并不完美。同时打开2个以上的菜单时，一个菜单会隐藏另一个菜单。当然，这可以通过确保在任何给定的时刻打开不超过1个菜单来解决（就像常规的select元素一样）。