Scrollview - how do i add data to it?

You must Login before you can answer or comment on any questions.

So i have this code:

var answerView = Ti.UI.createScrollView({ //var added
    top: Ti.Platform.displayCaps.platformHeight*0.55,
    left:Ti.Platform.displayCaps.platformWidth*0.1,
width: Ti.Platform.displayCaps.platformWidth*0.8,
backgroundImage: '/images/labelBackground.png',
borderRadius: 8,
height: Ti.Platform.displayCaps.platformHeight*0.5,
contentHeight:'auto',
    showHorizontalScrollIndicator:true,
    scrollType:'vertical',
});
for (var j = 0; j < question.answers.length; j++){
    var row = createRow(question.answers[j]);
answerView.add(row);
}

and this function:

function createRow(answer) {
var row = Ti.UI.createView({
    width:'100%', 
    height: 'auto',
});
var answerButton = Ti.UI.createButton({
    top: '1%',
    left: '1%',
    title: answer.answer,
    value: answer.order,
    width:'98%',
    font : {fontSize:'12sp'},
});
row.add(answerButton);
return row;
}

The problem is, the darn thing overlays all the buttons into one... that is, it isn't "pushing down" the rows. From the titanium tutorial here:

http://docs.appcelerator.com/titanium/2.1/index.html#!/api/Titanium.UI.ScrollView

I would have thought this would work, but it doesn't. I know i can do some magic with the numbers and send each row the position it should have, but I thought maybe titanium would be clever enough to do that? Am i missing something?

2 Answers

set the layout to vertical on the scrollView

— answered 8 months ago by Aaron Saunders
answer permalink
6 Comments
  • this example is from the documentation you referenced above

    var scrollView = Ti.UI.createScrollView({
      bottom:120,
      contentHeight: 'auto',
      layout: 'vertical' // <--- HERE
    });

    — commented 8 months ago by Aaron Saunders

  • this does not work - i added this soon after posting my question. I am using the 2.1.2 build of titanium ( i think? i just went to help in titanium studio...)

    — commented 8 months ago by lord bharal

  • i just cut and pasted the example directly from the documentation and it works fine...

    var win = Ti.UI.createWindow({
      backgroundColor:'white'
    });
     
    if (Ti.UI.Android){
      win.windowSoftInputMode = Ti.UI.Android.SOFT_INPUT_ADJUST_PAN;
    }
     
    function createRow(i) {
      var row = Ti.UI.createView({
        backgroundColor: 'white',
        borderColor: '#bbb',
        borderWidth: 1,
        width:'100%', height: 70,
        top: 0, left: 0
      });
      var inputTextField = Ti.UI.createTextField({
        hintText: 'Enter value ' + i,
        keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
        top: 10, left: '10%',
        width: '80%', height: 60
      });
      row.add(inputTextField);
      return row;
    }
     
    var scrollView = Ti.UI.createScrollView({
      bottom:120,
      contentHeight: 'auto',
      layout: 'vertical'
    });
     
    for(var i = 0; i <= 20; i++){
    var row = createRow(i);
      scrollView.add(row);
    }
    win.add(scrollView);
     
    var label = Ti.UI.createLabel({
      backgroundColor:'darkgray',
      text: 'Your advert here',
      textAlign: 'center',
      bottom:0,
      width: Titanium.UI.FILL, height:100
    });
    win.add(label);
    win.open();
    application build.log
    [INFO] Titanium SDK version: 2.1.2 (08/24/12 14:46 ed7f777)
    [INFO] iPhone Device family: universal
    [INFO] iPhone SDK version: 5.1
    [INFO] iPhone simulated device: iphone

    — commented 8 months ago by Aaron Saunders

  • Show 3 more comments

Oh jesus.

Titanium is moronic in this instance - the problem was I had

height: 'auto' in the definition of each row - that is:

function createRow(answer) {
    var row = Ti.UI.createView({
        width:'100%', 
        height: 'auto',
});
...
And funnily enough, that makes each row REALLY BIG, probably as big as the entire space alloted for the row. I don't know, i never tried to scroll through it. So just change the height value for the row to something sane - i always base mine off the display height.

Now I have

function createRow(answer) {
    var row = Ti.UI.createView({
        width:'100%', 
        height: Ti.Platform.displayCaps.platformHeight*0.1,
});
...
and all is well.

— answered 8 months ago by lord bharal
answer permalink
2 Comments
  • and of course, i have to have layout: 'vertical' as noted in the answer by Saunders.

    — commented 8 months ago by lord bharal

  • btw.: there is no more 'auto' value since 2.x, instead there are Ti.UI.SIZE and Ti.UI.FILL.

    — commented 8 months ago by Alexander Bauer

Your Answer

Think you can help? Login to answer this question!