search

telerik / kendo-react

Issue tracker - KendoReact http://www.telerik.com/kendo-react-ui/
https://kendo-react-teal.vercel.app
Other
209 stars 36 forks source link

Grid columns misalignment when zooming the browser. #904

Open simonssspirit opened 3 years ago

simonssspirit commented 3 years ago

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 commented 2 years ago

reported again in 1529881

simonssspirit commented 2 years ago

reported again in 1540833

simonssspirit commented 2 years ago

reported again in 1552677

simonssspirit commented 2 years ago

reported alos in 1556870

jasel-lewis commented 2 years ago

@simonssspirit, has there been any movement on this?

vveesseelliinnaa commented 2 years ago

reported again in ticket ID: 1569452

Xizario commented 2 years ago

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 commented 1 year ago

@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.