我正在尝试在 Kendo Grid 中使用某些 Bootstrap 元素,例如 Bootstrap 下拉按钮和工具提示。
问题是下拉列表或工具提示始终位于下方或上方的行下方。我试过调整显示元素的 z-index,但这并不能解决它。
有没有人设法找到解决方案?
我正在尝试在 Kendo Grid 中使用某些 Bootstrap 元素,例如 Bootstrap 下拉按钮和工具提示。
问题是下拉列表或工具提示始终位于下方或上方的行下方。我试过调整显示元素的 z-index,但这并不能解决它。
有没有人设法找到解决方案?
.btn-group 类,它是下拉菜单的容器,相对定位,因此改变下拉菜单类的 z-index 不会有任何好处。您可以绝对定位,然后从那里调整定位。这样的事情应该让你开始:
.k-grid-content .btn-group {
position: absolute;
}
.k-grid-content .btn-group .btn {
top: -10px;
}
链接到一个 jsFiddle 演示它的实际操作。
问题在于将网格内容永久设置为overflow-y: scroll
它并不真正需要的内容(除非您是具有虚拟化功能的固定高度)。
通过更改网格内容的 CSS 以删除滚动条,设置overflow: visible
和添加额外的填充以解决缺少的滚动条,它现在可以工作了。
我已经更新了jsFiddle来演示。
感谢所有的帮助。
为了将来参考,如果您有其他网格单元格可能包含将溢出到具有上述修复的其他列的数据,您可以将一个类设置为自定义网格操作列,如下所示:
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 选择器更改