twitter-bootstrap - 包含 Bootstrap 下拉菜单剪辑菜单的 ag-Grid 单元格

Question

我有一个 ag-Grid 设置来显示数据，右侧的单元格显示上下文菜单。此上下文菜单由按钮触发，使用 Bootstrap 下拉菜单。单击时，按钮会正确触发菜单的显示，但 ag-Grid 单元格会隐藏下拉菜单。我试图强制溢出:在父元素以及网格单元本身上可见，但没有成功。我什至尝试在父元素上设置 z-index，但仍然无法让它工作。我唯一取得的轻微成功是通过设置溢出:滚动。如果我滚动单元格的内容，我可以看到下拉列表。不完全是用户友好的。有人有建议吗？
注意:我已经尝试过:CSS: Bootstrap drowpdown hides behind grid cell

感谢您的任何建议!

Answer 1

isPopup仅适用于可编辑单元格。

要在 ag-grid-community 版本 19 的不可编辑单元格中使用 Bootstrap 下拉菜单:

申请 overflow: visible至.ag-cell , 或者, 更好, 到 cellClass你申请
到列定义中的单元格，例如.actions-button-cell

设置 z-indexes 以便焦点行显示在未焦点行上方。

CSS:

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

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

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

这允许下拉列表在单元格和行之外流动。

如果您还想在网格之外有下拉流，您可以添加如下内容:

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

见 plnkr sample