John Willey
Top achievements
Rank 1
Rank 1
John Willey
asked on 12 Oct 2012, 09:29 PM
Hi,
I'm having trouble trying to make a Scroller component work. Basically, what i want to do is a scrollable table with fixed headers at the top and left (fixed in the sense that they are always visible, but they follow the table content as it scrolls). The problem is that when i initialize the Scroller using kendoMobileScroller the table only scrolls horizontally; the vertical scrolling doesn't work. Here's a simplified example showing this behaviour (it doesn't have the fixed headers on the table.. it's just a scrollable table).
I guess i'm doing something wrong here, as it's a very simple example, but i haven't figured it out.
Thanks in advance :)
Edit: i've found a previous thread that discusses a similar problem, but it was from an older version of Kendo (i'm using 2012.2.913).
I'm having trouble trying to make a Scroller component work. Basically, what i want to do is a scrollable table with fixed headers at the top and left (fixed in the sense that they are always visible, but they follow the table content as it scrolls). The problem is that when i initialize the Scroller using kendoMobileScroller the table only scrolls horizontally; the vertical scrolling doesn't work. Here's a simplified example showing this behaviour (it doesn't have the fixed headers on the table.. it's just a scrollable table).
I guess i'm doing something wrong here, as it's a very simple example, but i haven't figured it out.
Thanks in advance :)
Edit: i've found a previous thread that discusses a similar problem, but it was from an older version of Kendo (i'm using 2012.2.913).
2 Answers, 1 is accepted
0
Hi John,
Scroller needs container dimensions in order to work - if you don't have height set, it won't activate. Check the updated jsFiddle.
Greetings,
Kamen Bundev
the Telerik team
Scroller needs container dimensions in order to work - if you don't have height set, it won't activate. Check the updated jsFiddle.
Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John Willey
Top achievements
Rank 1
Rank 1
answered on 19 Oct 2012, 07:25 PM
Thanks Kamen, that helped a lot :)
The underlying problem was that the element that was set with kendoMobileScroller had its height set by its contents (which was a table), instead of the height of its parent. If set to the height of it's parent the Kendo Scroller works perfectly.
I managed to set its height correctly (without hard-coding it, as it would vary with the screen size) by using the awesome "display: box" CSS property (that Kendo also uses to layout the header, content and footer elements). Here's a nice article that explains how the flexible box model works. Updated jsFiddle (notice that now the table can be correctly scrolled to reveal all its elements :).
The underlying problem was that the element that was set with kendoMobileScroller had its height set by its contents (which was a table), instead of the height of its parent. If set to the height of it's parent the Kendo Scroller works perfectly.
I managed to set its height correctly (without hard-coding it, as it would vary with the screen size) by using the awesome "display: box" CSS property (that Kendo also uses to layout the header, content and footer elements). Here's a nice article that explains how the flexible box model works. Updated jsFiddle (notice that now the table can be correctly scrolled to reveal all its elements :).