Scaling the page results in column shifting

5 posts, 1 answers
  1. Mikhail
    Mikhail avatar
    5 posts
    Member since:
    May 2014

    Posted 15 Sep Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 17 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Mikhail
    Mikhail avatar
    5 posts
    Member since:
    May 2014

    Posted 19 Sep in reply to Stefan Link to this post

    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?

  5. Answer
    Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 20 Sep Link to this post

    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.
     
  6. Mikhail
    Mikhail avatar
    5 posts
    Member since:
    May 2014

    Posted 21 Sep in reply to Stefan Link to this post

    Thank you a lot Stefan. It helps.
Back to Top
Kendo UI is VS 2017 Ready