Hi Kendo folks,
I'm trying to use the mobile ScrollView in my webapp. It's using Kendo UI AngularJs - I'm wondering if this combination works or not? I'm experiencing a lot pain right now.
1. Mainly, the images won't show - if I inspect the element on the scrollviewer, I will find that's because the "virtual page" has no width or height. When I manually set width and height to it, I see my image.
<div style="height: 62px; transform-origin: left top 0px;"> <div class="k-virtual-page km-virtual-page" style="width: 0px; height: 62px; transform: translate3d(0px, 0px, 0px);"></div> <div class="k-virtual-page km-virtual-page" style="width: 0px; height: 62px; transform: translate3d(0px, 0px, 0px);"> <div class="cl-asset-image__image" style="background-image: url('imageUrl');" title="Capture.JPG"></div> </div> <div class="k-virtual-page km-virtual-page" style="width: 0px; height: 62px; transform: translate3d(0px, 0px, 0px);"> <div class="cl-asset-image__image" style="background-image: url('imageUrl');" title="giphy.gif"></div> </div></div>
2. When I call the next() function, nothing happens. I'm sure I have 2 pages, and I'm using datasource
Thanks for help. Happy holidays.
Anna
3 Answers, 1 is accepted
I reproduced such a problem which went away when I set the <html> element height to 100%. As for the next() call problem, I am unable to reproduce it. Here is my test scenario:
http://dojo.telerik.com/@tsveti/oXAgur/3
You can try to reproduce the problems that you observe inside it and send it back to us for further investigation.
Regards,
Tsvetina
Progress Telerik
Rank 1
Hi Tsvetina,
Thank you for replying so quickly. I think I know why things in my app doesn't work - you are wrapping the scrollview inside of kendo-mobile-application, but I'm using a normal web kendo ui. I tried to wrap the <div id="scrollview"> inside of kendo-mobile-application, it would sort of work with 2 problems:
1. I get following error: "Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container".
2. I guess because kendo-mobile-application starts a new ng-app, I lose connection with my overall controller. Is there anyway to solve this problem?
Best,
Anna
The ScrollView works normally without an Application instance, but it would usually need adding some class names to the page manually. Also, as a part of the Hybrid UI suite, it needs you to load the respective mobile stylesheet. Here are the changes that I made after removing the Application and View instances:
1) Add km-root class name to the body.
2) Add km-nova class name to the controller element.
3) Add a style to remove an undesired border around the ScrollView.
Here is a modified Dojo:
http://dojo.telerik.com/@tsveti/IriGoP
Note the kendo.mobile.all.min.css reference in the head. If you are using a single skin only, you can reference kendo.mobile.skinName.min.css instead.
Regards,
Tsvetina
Progress Telerik