Grid columns misalignment when zooming the browser.

[simonssspirit]

Grid columns misalignment when zooming the browser.

This can be seen here: https://www.telerik.com/kendo-react-ui/components/grid/get-started/

Workaround: https://codesandbox.io/s/elated-sun-tv9zcx

import { setScrollbarWidth } from "@progress/kendo-react-common";
window.addEventListener("resize", () => setScrollbarWidth(), false);

[simonssspirit]

reported again in 1529881

[simonssspirit]

reported again in 1540833

[simonssspirit]

reported again in 1552677

[simonssspirit]

reported alos in 1556870

[jasel-lewis]

@simonssspirit, has there been any movement on this?

[vveesseelliinnaa]

reported again in ticket ID: 1569452

[Xizario]

The header padding for the scroll width is controlled using a CSS var, and adding this to your app will resolve it:

import { setScrollbarWidth } from "@progress/kendo-react-common";
window.addEventListener("resize", () => setScrollbarWidth(), false);

Essentially it reset the css var when the window is resized, because there is no pure way to detect browser zoom, you can rely on the resize event.

[kdikov82]

@jivanova @nstoychev Should we add this as a built-in feature for the Grid and any other component that has scrollbar? I personally think that it should be added separately as a workaround by the developers, because it will resolve the issues with all components and we will not have to handle the "resize" event internally for all components.