Kendo Grid 不能很好地与 Bootstrap 下拉菜单或工具提示配合使用答案

【问题标题】：Kendo Grid do not play nice with Bootstrap dropdown or tooltipsKendo Grid 不能很好地与 Bootstrap 下拉菜单或工具提示配合使用
【发布时间】：2013-01-11 10:43:08
【问题描述】：

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

问题是下拉菜单或工具提示总是位于下方或上方的行下方。我试过调整显示元素的 z-index，但这并不能解决问题。

有没有人设法解决这个问题？

【问题讨论】：

给我们代码，否则不会发生。你可以使用jsbin.com
我不认为代码是必要的，但这里有一个关于 jsFiddle 的演示，它显示了问题：link

标签： javascript web-applications kendo-ui

【解决方案1】：

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

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

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

Link 到一个 jsFiddle 来演示它。

【讨论】：

太好了。谢谢你。我想我也可以用它来解决工具提示的问题。
嗯...看起来我有点为时过早将其标记为已解决。除了最后两行之外，其他所有行都可以——除非您向下滚动表格，否则它们不会显示。大多数用户都会错过这一点。
您可以尝试将按钮菜单放置在按钮的侧面或更靠近按钮的位置以解决此问题。

【解决方案2】：

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

通过更改网格内容的 CSS 以移除滚动条、设置 overflow: visible 并添加额外的填充以解决缺少的滚动条，它现在可以工作了。

我已更新 jsFiddle 以进行演示。

感谢大家的帮助。

【讨论】：

感谢 Mat，这正是我所需要的。

【解决方案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 选择器更改

【讨论】：