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

[Solved] Use ScrollView in AngularJs wrapper version?

3 Answers 227 Views

ScrollView (Mobile)

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

Anna asked on 27 Dec 2017, 05:10 AM

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>

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

answered on 27 Dec 2017, 12:18 PM

Hi Anna,

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 29 Dec 2017, 04:45 AM

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

answered on 02 Jan 2018, 09:50 AM

Hi 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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.