Kendo UI Grid Column Distortion if Vertical Scroll Set to Auto

[Manasi]

Hi

I have implemented Kendo Grid with requirement as below.

Overflow-y should always be set to auto despite of number of rows. This is causing the grid row & header misalignment

Can you suggest how to avoid this misalignment with overflow-y: auto style is retained, is there any way to achieve it?

Dojo here : https://dojo.telerik.com/UqAqAGOw

Screenshot below: Page size is 5 with overflow-y set to auto which distorts the alignment 

[Georgi Denchev]

Hi, Manasi,

Thank you for the provided Dojo.

The misalignment appears because the header is separate from the grid content. If you wish the align them, you should remove the padding applied to the header element:

  .k-grid-header {
    padding: 0 !important;
  }  

However this would cause another misalignment when the scrollbar is visible.  In this case you can use JavaScript/jQuery to detect when the scrollbar is visible and manually add a custom class to the header element, which removes the padding. The dataBound event will be fired any time you change the page or pageSize which makes it the perfect place to check for the visibility of the scrollbar.

Dojo:

https://dojo.telerik.com/@gdenchev/UbIZoxEv 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik