How to make KendoGrid horizontal scroll bar stay at bottom of screen if table is too long?

Hello, Max,

The scrollbar is automatically rendered element by the browser when overFlow is set the scroll. Currently, we have no access to that element in order to style it or make it stick at the bottom of the viewport.

What we can recommend in this case is to make the Grid height 100% and make it vertically scrollable. This will make the Grid to take all of the available space on the screen and the horizontal scrollbar will be always visible:

https://stackblitz.com/edit/react-dkqkpf?file=app/main.jsx

Let me know if you need more information on this matter.

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks for your solubtions. It works. I checked your demo using kendo-react-grid 3.18. And our version is 3.15. I tested height: 100% does not work. Do I have to upgrade to 3.18?

Thanks.

Regards,

Max

Hello, Max,

This should not be related to the version.

Using height 100% requires the parent element to have set height or height 100% up to the body:

https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height

https://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks for your information. In fact, I already tried set parent height to 100%. Please check attached pic for detail. But still does not work for some reason.

Regards,

Max

Hi Stefan,

This really work. I have to set all parents height to 100%