This problem has been even on the demo page.
I opened the page and performed the simple script to display cell borders through developer console:
$('.k-grid-content tr td').css('border-left-width','1px')After this I can see column borders as you can see on the first screenshot.
Then I scale page with Ctrl and mouse wheel. The result you can see on the second screenshot. Note, that if I will scale the page back to normal size, column borders in the body will not get initial position, they will be shifted regarding to header column borders.
Is there a way to avoid this shifting on the scaling?
4 Answers, 1 is accepted
Thank you for the interest in Kendo UI.
This is a known limitation of the Kendo UI Grid.
When the Grid is scrollable it will render two different tables one for the body and the header. When the pages is zoomed the misalignment can occur between the two tables. I can suggest setting the scrollable property of the Grid to false, to ensure that the columns and headers will be properly aligned when the page is zoomed.
Apologies for the inconvenience this may cause you.
Regards,
Stefan
Telerik by Progress
Rank 1
Hello Stefan.
I realized that I can disable scrollable and I will avoid misalignment. However, is there a way or some kind of workaround to get the required behaviour without disabling scrollable property? As far as I know, if I will manipulate with CSS and limit the height and adding overflow-y to whole div.k-grid then table header will not be scrolled with table body.
It is my understanding from your post, that your suggestion is to accept this behaviour and do not try to do nothing with this issue?
I can suggest the following workaround in this scenario.
On the resize() event of the window element which is triggered when the window is zoomed, execute the following code to adjust the styling:
$('.k-grid').data('kendoGrid').thead.closest(".k-grid-header").css("padding-right", kendo.support.scrollbar(true))I hope this will help you to resolve the issue.
Regards,
Stefan
Telerik by Progress
Rank 1