ag-grid 在单元格渲染器之上渲染答案

【问题标题】：ag-grid renders on top of cell rendererag-grid 在单元格渲染器之上渲染
【发布时间】：2019-01-13 15:41:43
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

虽然这是使用 ag-grid-react。

【讨论】：

【解决方案2】：

我也遇到了完全相同的问题（不过使用 ag-grid-react）。

这是我按照上述 Frank Wallis 的回答实施的可行解决方案： https://stackblitz.com/edit/react-z7aogy

为什么会这样？

单元格渲染器的 z-index 比 ag-grid 高（仅当菜单打开时）[因此它还必须有 position，而不是 'static ']（参见 ColorCell.js）
ag-grid cell 样式包含：overflow: visible（参见 style.css）
在 gridOptions 中：suppressRowTransform=true（参见 Table.js）

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

【讨论】：

【解决方案3】：

在 ag-grid-react 最新版本中，在您的列定义中，您可以简单地添加一个属性“cellClass”，如下所示，该单元格的内容可能会溢出（使用工具提示为我工作）：-

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

我提供了这个答案，以防它有助于像我这样的新人找到放置溢出的地方：可见。（根据上面的答案）

【讨论】：