Question

我正在尝试在Kendo Grid中使用某些Bootstrap元素，例如Bootstrap下拉按钮和工具提示。

问题是下拉列表或工具提示始终位于下方或上方的行下方。我已经尝试调整显示元素的z-index，但这并没有解决它。

有没有人设法找到解决方案？

Answer 1

.btn-group类，它是下拉菜单的容器，相对定位，因此更改下拉菜单类的z-index将不会有任何好处。您可以绝对定位，然后从那里调整定位。这样的事情应该让你开始：

.k-grid-content .btn-group {
    position: absolute;
}

.k-grid-content .btn-group .btn {  
    top: -10px;
}

Link向jsFiddle演示了它的实际效果。

Answer 2

问题在于Grid网格内容被永久设置为overflow-y: scroll，这并不是真正需要的（除非您是具有虚拟化功能的固定高度）。

通过更改网格内容的CSS以删除滚动条，设置overflow: visible并添加额外的填充以解决丢失的滚动条，现在可以正常工作。

我已更新jsFiddle以进行演示。

感谢您的帮助。

Answer 3

为了将来参考，如果您有其他网格单元格可能包含将通过上述修复程序溢出到其他列的数据，您可以将类设置为自定义网格操作列，如下所示：

columns: [
  {
   field: "Actions", 
   title: " ", 
   filterable: false, 
   attributes: {"class": "actions-column"},
   template: <your action button template or template link here>
  }
]

然后在页面样式中添加以下CSS：

.k-grid-content tr td.actions-column {
   overflow: visible;
}

编辑：小css选择器更改

Kendo Grid与Bootstrap下拉列表或工具提示不兼容

3 个答案: