Kendo Grid Headings misaligned when vertical scrolling is enabled

1
votes

I've noticed this for a while now on my Kendo Grids. I haven't been able to find anything on SO or the Telerik Support Forums about it so I figured I would just ask to see if anyone else has this same issue.

Basically, if I set my Kendo Grid to have vertical scrolling, the heading columns for my grid are then offset by the width of the scrollbar which appears in the grid body.

I'm not sure if this is a CSS conflict that I have somewhere or if this is just the way Kendo intends it to be (doesn't seem right though).

Here is a screenshot of what I'm referring to:

enter image description here

2
kendo-uikendo-grid
Do you see the same problem on this page ? If no, then check for custom padding or width CSS styles in your application, which override the Grid styling. If yes, then specify what browser and device you are using. - dimodi
@dimodi Nope, it seems to work perfectly fine there. Which means it most likely is a CSS issue on my end like I expected. Thanks for posting an example, I'll look into it a little more. - Quiver

2 Answers

2
votes

As I expected, it was a CSS style that was causing this problem.

Someone at some point overrode the default .kendo-grid-header class and gave it a padding-right of 0px instead of the default 17px.

Changed it back and now it's displaying as I expect it to.

2
votes

Thank you so much for this answer! While it didn't work for me with the latest version of kendo-grid, it was the reason that I was able to find the answer in the latest version.

We were overwriting the default .k-grid-header class. Inspecting the HTML, we found that the latest version has the padding as 0px 16px 0px 0px.