Issue with scroll view in titanium?

Question

I have a form which has 10 questions with rating bars. I need to display 10 questions in same page. The questions won't fit for a screen so I need to make a vertical scroll and should able to view 10 questions in same page. I tried many ways But it is not working. Please help me with vertical scroll view?

view

<Alloy>
    <Window id="questionnaireWin" title="questionnaire" platform="android,ios">

        <View id="header">
              <Label id="title">questions form</Label>
        </View>
         <ScrollView showHorizontalScrollIndicator="true" id="Scroll" layout="vertical">

        <View class="questionsContainer">
            <View class="row">
                <Label class="question">1. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR1"  max='5' initialRating='2.5'></Require>
            </View>
            <View class="row">
                <Label class="question">2. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR2"  max='5' initialRating='3'></Require>
            </View>
            <View class="row">
                <Label class="question">3. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR3"  max='5' initialRating='2'></Require>
            </View>
            <View class="row">
                <Label class="question">4. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR4"  max='5' initialRating='3.5'></Require>
            </View>
            <View class="row">
                <Label class="question">5. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR5"  max='5' initialRating='2.5'></Require>
            </View>
            <View class="row">
                <Label class="question">6. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR6"  max='5' initialRating='3'></Require>
            </View>
            <View class="row">
                <Label class="question">7. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR7"  max='5' initialRating='2'></Require>
            </View>
            <View class="row">
                <Label class="question">8. HThis ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf? </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR8"  max='5' initialRating='3.5'></Require>
            </View>
            <View class="row">
                <Label class="question">9. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR9"  max='5' initialRating='2'></Require>
            </View>
            <View class="row">
                <Label class="question">10. vThis ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR10"  max='5' initialRating='3.5'></Require>
            </View>

            <View class="row">
                <Button class="processRating">Procees</Button>
            </View>
        </View>
         </ScrollView>
    </Window>
</Alloy>

And the style code is as follows for the above view,

"#questionnaireWin": {
    layout: 'vertical',
    fullscreen: false,
    navBarHidden: true
}

"#header": {
    top: 0,
    height: "50dp",
    width: Ti.UI.FILL,
    backgroundGradient: {
        type: "linear",
        startPoint: { x: "0%", y:"0%"},
        endPoint:   { x: "0%", y:"100%"},
        colors: [
            { color: "#4F94CD", offset: 0.0 },
            { color: "#4F94CD", offset: 1.0 }
        ]
    }
}

"#title": {
    align: "center",
    color: "#fff",
    font: {
        fontSize: '21dp',
        fontWeight: 'bold'
    }
}

".questionsContainer":{
    height:Ti.UI.FILL,
    width:Ti.UI.FILL,
    layout:'vertical',
    backgroundColor:"#f39c12"
}
'.row':{
    height:'20%',
    width:'100%',
    backgroundColor:'#bdc3c7',
    layout:'vertical'
}
".question":{
    font:{
        fontSize:18,
        fontWeight:'normal'
    },
    color:"#000",
    left:10,
    height:'50%'
}
".starRating":{
    height:'50%',
    left:10
}
".processRating":{
    height:45,
    width:'90%',
    backgroundColor:'#3498db',
    color:'#fff'
}

Answer 1

This one was interesting. You have 10 rows, but each row is "20%" of the size of the questionsContainer. That means there is only enough space for 5 to show on the screen.

'.row':{
    // height:'20%', // <--- Change this to something else that isn't 20%
    height: "200dp",
    width:'100%',
    backgroundColor:'#bdc3c7',
    layout:'vertical'
}

Let me know if that doesn't fix it for you. I had made 4-5 other modifications before I stumbled on that one.