Use ScrollView in AngularJs wrapper version?

4 posts, 0 answers
  1. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 26 Dec 2017 Link to this post

    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

     

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2270 posts

    Posted 27 Dec 2017 Link to this post

    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.
  3. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 28 Dec 2017 in reply to Tsvetina Link to this post

    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

  4. Tsvetina
    Admin
    Tsvetina avatar
    2270 posts

    Posted 02 Jan Link to this post

    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.
Back to Top