Virtual scrolling example with flex and horizontal scrollbar

[Scott Waye]

Hi,

I want the grid to fill the available space and have virtual scrolling so I'm using a flex layout with the grid set to 100% and it sits in a div with style:

  flex: 1 1 auto;

Its almost working except the horizontal scroll bar that appears at the bottom of the grid overflows the containing div and hence causes a scroll bar on the browser.  It looks like the border on the horizontal scroll bar is at least part of the problem.  If you look at the attached image from the bottom left of the window you can see that in the red rectangle that I've added it shows a grey bar which is not part of the enclosing div. Do you have an example with: virtual scrolling, a horizontal scrollbar, and the grid filling the available space using flex?

 

Thanks,

 

 

[Stefan]

Hello Scott,

The desired result to have flex style for the Grid is not officially supported and can create undesired side effects as the one shown in the picture.

Still, I made an example of the Grid with horizontal scrolling, virtual scrolling and flex, which is working as expected:

http://dojo.telerik.com/oLIyu

Also, I can suggest checking our article for the Grid appearance to check all of the available options, requirements and limitations when styling the Grid:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress

[Scott Waye]

Thanks, your dojo looks perfect so I must have something else pushing it out.  I've changed the box-sizing to border and that has cured it for me, although I see you didn't have to do that.