Scrollable View not displaying properly in appcelerator

Question

I ahve implemented a scrollable view in appcelerator. but only the first and the last image is being displayed . the intermediate images are not loading. Any suggestions why ?

This is the code for the .xml file of the scrollable view.

<Alloy>
    <View class="container">
        <View class = " HeadingClass" >
            <Label class="headingClass" top = "0%">Scrollable View And Animation Screen</Label>
        </View>
        <ScrollableView class = "scrollableViewClass" id="scrollableView">
            <ImageView class="imgView1" id="imgViewId1"></ImageView>
            <ImageView class="imgView2" id="imgViewId2"></ImageView>
            <ImageView class="imgView3" id="imgViewId3"></ImageView>
            <ImageView class="imgView4" id="imgViewId4"></ImageView>
            <ImageView class="imgView5" id="imgViewId5"></ImageView>
        </ScrollableView>
        <!-- <View class="imageAnimationView" id="imageAnimation">
            <ImageView class="animateImageClass" id="animateImage"></ImageView>
        </View> -->
    </View>
</Alloy> <Alloy>
    <View class="container">
        <View class = " HeadingClass" >
            <Label class="headingClass" top = "0%">Scrollable View And Animation Screen</Label>
        </View>
        <ScrollableView class = "scrollableViewClass" id="scrollableView">
            <ImageView class="imgView1" id="imgViewId1"></ImageView>
            <ImageView class="imgView2" id="imgViewId2"></ImageView>
            <ImageView class="imgView3" id="imgViewId3"></ImageView>
            <ImageView class="imgView4" id="imgViewId4"></ImageView>
            <ImageView class="imgView5" id="imgViewId5"></ImageView>
        </ScrollableView>
        <!-- <View class="imageAnimationView" id="imageAnimation">
            <ImageView class="animateImageClass" id="animateImage"></ImageView>
        </View> -->
    </View>
</Alloy> 

This is the code for .tss file

".container" : {
  backgroundColor : "lightgray"
},

".headingClass" : {
    height : "5%",
    width : "70%",
    font: {
        fontFamily: 'Arial',
        fontSize: '14%',
        fontWeight: 'bold'
    },
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
},

".HeadingClass" : {
    backgroundColor : "gray",
    top : "5%",
    height : "6%",
    width : "100%"
},

".scrollableViewClass" : {
    top : "15%",
    height : "30%",
    width : "100%",
    contentHeight: Ti.UI.SIZE,
    contentWidth: Ti.UI.SIZE,
    showPagingControl : true
},

".imgView1" : {
    image : "/Images/appceleratorImage1.png",
    height : "100%",
    width : "100%"
},

".imgView2" : {
    image : "/Images/appceleratorImage2.png",
    height : "100%",
    width : "100%"  
},

".imgView3" : {
    image : "/Images/appceleratorImage3.png",
    height : "100%",
    width : "100%"
},

".imgView4" : {
    image : "/Images/appceleratorImage4.png",
    height : "100%",
    width : "100%"
},

".imgView5" : {
    image : "/Images/appceleratorImage5.png",
    height : "100%",
    width : "100%"
}

Answer 1

Try putting <View>'s around the <ImageView>'s. For testing purposes you could give them a backgroundColor to see if the pages are visible.