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

[Max]

Dear Sir/Madam,

We use a KendoGrid at the moment. It is good. And currently we try to keep horizontal scroll bar be visualable if table is too long. We do not want to horizontal scroll bar at the bottom all the time, otherwise user have to move to the bottom first then could scroll. Is it possible to do this? I checked document and did not find a good way. Can you give me some suggestions?

 

Thanks.

Regards,
Max

[Stefan]

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

[Max]

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

[Stefan]

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

[Max]

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

 

[Max]

Hi Stefan,

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