Kendo Grid do not play nice with Bootstrap dropdown or tooltips

Question

I'm trying to use certain Bootstrap elements inside a Kendo Grid, for example Bootstrap dropdown buttons and tooltips.

The problem is the dropdown or tooltips are always positioned below the row below or above. I've tried adjusting the z-index of the displayed elements, but this doesn't fix it.

Has anyone managed to find a solution to this?

Answer 1

The .btn-group class, which is the container for the dropdown-menu is positioned relatively so altering the z-index of the dropdown-menu class won't do any good. You can position is absolutely and then adjust the positioning from there. Something like this should get you started:

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

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

Link to a jsFiddle that demonstrates it in action.

Answer 2

The problem is to do with the Grid content being permanently set to overflow-y: scroll which it doesn't really need (unless you are a fixed height with the virtualization feature).

By changing the CSS of the grid content to remove the scroll bar, setting overflow: visible and adding extra padding to account for the missing scrollbar, it now works.

I've updated the jsFiddle to demonstrate.

Thanks for all the help.

Answer 3

For future reference, in case you have other grid cells that might contain data that will overflow into other columns with the above fix, you can set a class to the custom grid action column like so:

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

Then in the styling for the page add the following CSS:

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

edit: small css selector change