Issue with scroll view in titanium?

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

Answers


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.


Need Your Help

SQL Reformatting table columns

sql-server-2008 sql-update reformat

I have a table right now which is in a very inconvenient format.

iPhone 4 iOS5 How to properly cancel several NSTimers at once with ARC?

objective-c ios5 nstimer automatic-ref-counting iphone-4

I have several timers scheduled to play music at pre-determined intervals. I'm trying to find out if I'm cancelling them correctly, as my code does not seem to work because of the exception below.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.