This is a migrated thread and some comments may be shown as answers.

Scaling the page results in column shifting

4 Answers 77 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mikhail
Top achievements
Rank 1
Mikhail asked on 15 Sep 2016, 12:56 PM

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

Sort by
0
Stefan
Telerik team
answered on 17 Sep 2016, 08:20 AM
Hello Mikhail,

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Mikhail
Top achievements
Rank 1
answered on 19 Sep 2016, 05:05 AM

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?

0
Accepted
Stefan
Telerik team
answered on 20 Sep 2016, 02:34 PM
Hello Mikhail,

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Mikhail
Top achievements
Rank 1
answered on 21 Sep 2016, 05:22 AM
Thank you a lot Stefan. It helps.
Tags
Grid
Asked by
Mikhail
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mikhail
Top achievements
Rank 1
Share this question
or