ScrollView size

3 posts, 0 answers
  1. Ioan
    Ioan avatar
    36 posts
    Member since:
    Dec 2012

    Posted 27 May 2014 Link to this post

    I have a mobile app.
    One of the views structure looks like this:
    (the view's data-stretch attribute is set to false! otherwise my whole layout goes crazy)

    Large ScrollView:
      -> page1:
             -> a chart      
             -> and below a grid
      -> page2:
             -> some buttons, a date picker
             -> a chart      
             -> and below a grid
      -> page3:
             -> a ListView:
                      -> some text
                      -> an input
                      -> a small ScrollView with some pictures 
    I have issues with the last small ScrollView. I initiate this ScrollView only when it's into view (when the large ScrollView scroll event fires on third page).
    The problems is it doesn't have any size, but when I resize the browser window the pictures show up and everything works ok.
    If I statically define the ScrollView with no databinding, it also works without having to resize the browser window.
    Below is the code generated when i dinamically initiate the scrollview. The problems seems to be with the second div which has height:1px
                        <div id="meterImageGallery" data-role="scrollview" class="km-widget km-scrollview"><div style="height: 1px; -webkit-transform-origin: 0% 0%;"><div class="km-virtual-page" style="width: 326px; -webkit-transform: translate3d(-326px, 0px, 0px);"></div><div class="km-virtual-page" style="width: 326px; -webkit-transform: translate3d(0px, 0px, 0px);">
    <img class="meter-image" src="../ViewerService.svc/GetObjectImageById?id=485">
    </div><div class="km-virtual-page" style="width: 326px; -webkit-transform: translate3d(326px, 0px, 0px);">
    <img class="meter-image" src="../ViewerService.svc/GetObjectImageById?id=1067">
    </div></div><ol class="km-pages"><li class="km-current-page"></li><li></li><li></li></ol></div>

  2. Ioan
    Ioan avatar
    36 posts
    Member since:
    Dec 2012

    Posted 27 May 2014 Link to this post

    It works if I refresh the ScrollView immediately after creating it:

  3. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 28 May 2014 Link to this post

    Hi Ioan,

    In general nesting ScrollView inside a ScrollView is not supported and it is a scenario that we do not encourage our customers to use. In your case if the Scrollview works as expected after the refresh then it seems like that its parent element is not sized on when the widget is initialized, but as I already said this is unupported scenario.

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top