Scrollview help, want to know why its scrolling

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

Boiled this down to a simple test case which duplicates the layout design i want to accomplish in my app. The scroll content could change dynamically, but if it is very small, it wants to scroll anyway!. Help? The scroll height is fine, but it thinks its content is much larger then it actually is?

Testing on android 2.0.1GA2, haven't tried on iphone. No access to a mac

Titanium.UI.setBackgroundColor('#000');
 
var win = Titanium.UI.createWindow({  
    title:'window',
    backgroundColor:'#fff'
});
 
var mainView = Ti.UI.createView({
    layout: 'vertical',
    top: 0,
    width: '100%',
    height: '100%'
})
 
var image1 = Ti.UI.createImageView({
    width: 200,
    height: '200',
    image: "KS_nav_views.png"
})
 
var view = Ti.UI.createView({
    backgroundColor: 'blue',
    height: '100%',
    layout: 'vertical'
});
 
var scroll = Ti.UI.createScrollView({
    backgroundColor: "#444",
    contentHeight: 'auto',
    contentWidth: 'auto',
    height: '50%',
    width: '100%',
    showVerticalScrollIndicator : true,
    layout: 'vertical',
    top : 0
});
 
view.add(scroll);
 
var label = Ti.UI.createLabel({
    text: 'why does this scroll?'
});
 
scroll.add(label);
 
var image2 = Ti.UI.createImageView({
    width: 200,
    height: '25%',
    image: "KS_nav_ui.png",
    bottom : 0
});
 
win.add(mainView);
mainView.add(image1);
mainView.add(view);
win.add(image2);
 
win.open();

3 Answers

I had the same issue i fixed mine by setting fixed heights of all the content instead of %

Titanium.UI.setBackgroundColor('#000');
 
var win = Titanium.UI.createWindow({  
    title:'window',
    backgroundColor:'#fff'
});
 
var mainView = Ti.UI.createView({
    layout: 'vertical',
    top: 0,
    width: '100%',
    height: '100%'
})
 
var image1 = Ti.UI.createImageView({
    width: 200,
    height: 200,                            //removed ' '
    image: "KS_nav_views.png"
})
 
var view = Ti.UI.createView({
    backgroundColor: 'blue',
    height: '100%',
    layout: 'vertical'
});
 
var scroll = Ti.UI.createScrollView({
    backgroundColor: "#444",
    contentHeight: 'auto',
    contentWidth: 'auto',
    height: '50%',
    width: '100%',
    showVerticalScrollIndicator : true,
    layout: 'vertical',
    top : 0
});
 
view.add(scroll);
 
var label = Ti.UI.createLabel({
    text: 'why does this scroll?'
});
 
scroll.add(label);
 
var image2 = Ti.UI.createImageView({
    width: 200,
    height: '25%',          //change this to an actual size like you did for width
    image: "KS_nav_ui.png",
    bottom : 0
});
 
win.add(mainView);
mainView.add(image1);
mainView.add(view);
win.add(image2);
 
win.open();
try this and let me know you may have to play with the image sizes to get it exact hope this helps

— answered 2 years ago by Rcasa Rcasa
answer permalink
1 Comment
  • Yeah i noticed that same thing after playing with it for some time. It has something to do with the scrollview being itself in a sub view and the % height acting weirdly. Compounding the problem is my actual app are in tabs which lower the screen size even more.

    Might just play with some manually calculated percentage values which are then fed in as fixed heights.

    — commented 2 years ago by Paul Hamilton

created a jira bug for this https://jira.appcelerator.org/browse/TC-915

i think this is caused from android fitting it to the screen automatically but the scroll view is still basing it off of the true dimensions of the image but i don't know for sure

Your Answer

Think you can help? Login to answer this question!