This is a migrated thread and some comments may be shown as answers.

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

5 Answers 85 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Max asked on 16 Oct 2020, 05:03 AM

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

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 16 Oct 2020, 07:44 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Max
Top achievements
Rank 1
answered on 16 Oct 2020, 12:40 PM

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

0
Accepted
Stefan
Telerik team
answered on 16 Oct 2020, 12:44 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Max
Top achievements
Rank 1
answered on 16 Oct 2020, 01:24 PM

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

 

0
Max
Top achievements
Rank 1
answered on 16 Oct 2020, 02:00 PM

Hi Stefan,

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

Tags
General Discussions
Asked by
Max
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Max
Top achievements
Rank 1
Share this question
or