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'
}

score 3 · Accepted Answer · answered Sep 24 '14 at 16:42

3

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.

answered Sep 24 '14 at 16:42

Martin

1,914
1
12
14

Yes it is working, But there is a small issue, If the question text is large it get fixed correctly. If the text is small it is showing too much empty space. I can't specify the height of each question because the questions are dynamic. Is there any way of auto height so that it fit based on the question text. – Vinod Sep 25 '14 at 06:25
You should be able to use height: Ti.UI.SIZE and it should size itself to the correct size needed to fit all the content of the row. You might need to add views to the bottom and top if you want to adjust spacing between rows. – Martin Sep 25 '14 at 13:52

Issue with scroll view in titanium?

1 Answers1