If you look at this example on an Android or iPhone (not on desktop)
http://demos.telerik.com/kendo-ui/m/index#grid/adaptive
You'll see that if you press near 'Maria Anders' and pull down, the contents of the grid scroll down. I have the same behavior on my grids. Can this be stopped?
Locally I've tried setting data-stretch="true" on the view but it seems to help in some cases but not others.
Unfortunately it's difficult providing an example as it's on a grid pretty wired into my code
thanks
http://demos.telerik.com/kendo-ui/m/index#grid/adaptive
You'll see that if you press near 'Maria Anders' and pull down, the contents of the grid scroll down. I have the same behavior on my grids. Can this be stopped?
Locally I've tried setting data-stretch="true" on the view but it seems to help in some cases but not others.
Unfortunately it's difficult providing an example as it's on a grid pretty wired into my code
thanks
4 Answers, 1 is accepted
0
Anthony
Top achievements
Rank 1
Rank 1
answered on 21 Aug 2014, 02:06 PM
I have a general problem in this regard
I have a view on a page with some contents, the contents are bigger than the page. If I set data-stretch="true" on the view then I don't get the 'movable in all directions' problem, but I can't get to the bottom of the page
Ditto for grids that are bigger than the page
I have a view on a page with some contents, the contents are bigger than the page. If I set data-stretch="true" on the view then I don't get the 'movable in all directions' problem, but I can't get to the bottom of the page
Ditto for grids that are bigger than the page
0
Anthony
Top achievements
Rank 1
Rank 1
answered on 22 Aug 2014, 09:08 AM
I guess what I need here is to somehow configure a view, to configure it's scroller, to allow vertical scrolling only, and only within the confines of the page
0
Hi Anthony,
If you want to disable the scroller of the grid only you can do so via JavaScript:
$("#grid").find("[data-role=scroller]").data("kendoMobileScroller").disable()
This code will find the scroller of the grid an disable it.
You can pass configuration options of the view's scroller via the scroller option. You can also try using nativeScrolling to see if this would make any difference.
If you need further assistance please try to update our adaptive grid demo so it behaves as your real application.
Regards,
Atanas Korchev
Telerik
If you want to disable the scroller of the grid only you can do so via JavaScript:
$("#grid").find("[data-role=scroller]").data("kendoMobileScroller").disable()
This code will find the scroller of the grid an disable it.
You can pass configuration options of the view's scroller via the scroller option. You can also try using nativeScrolling to see if this would make any difference.
If you need further assistance please try to update our adaptive grid demo so it behaves as your real application.
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anthony
Top achievements
Rank 1
Rank 1
answered on 24 Sep 2014, 12:49 PM
I finally back to this and got to the bottom of it, it's an understanding problem. Adding here in case anyone else has a similar problem
The real problem I had was that I was getting scrolling in both directions even though the contents fit horizontally.
Investigation, on mobile you get a -webkit-transform: translate3d effect on a page regardless of whether the contents fit on the page or not (assuming data-zoom hasn't been set)
If everything fits within the page then even though that is there you can't scroll in any direction
Once you overrun the page vertically you can scroll vertically
Once you overrun the page vertically you can scroll horizontally
If you overrun in both directions it looks like the contents are floating everywhere, this looks odd but makes sense.
What I was seeing was everything fit on the page horizontally but it was floating, i.e. allowing scrolling in both directions. This looked odd.
The culprit was an invisible div that overrun the page horizontally, I found it via
*
{
border: solid 1px black;
}
As I was seeing odd effects with the grid as well I couldn't see the wood for the trees (the grid problem was due to column fixed widths being greater than the width of the page)
Happy now thanks
The real problem I had was that I was getting scrolling in both directions even though the contents fit horizontally.
Investigation, on mobile you get a -webkit-transform: translate3d effect on a page regardless of whether the contents fit on the page or not (assuming data-zoom hasn't been set)
If everything fits within the page then even though that is there you can't scroll in any direction
Once you overrun the page vertically you can scroll vertically
Once you overrun the page vertically you can scroll horizontally
If you overrun in both directions it looks like the contents are floating everywhere, this looks odd but makes sense.
What I was seeing was everything fit on the page horizontally but it was floating, i.e. allowing scrolling in both directions. This looked odd.
The culprit was an invisible div that overrun the page horizontally, I found it via
*
{
border: solid 1px black;
}
As I was seeing odd effects with the grid as well I couldn't see the wood for the trees (the grid problem was due to column fixed widths being greater than the width of the page)
Happy now thanks