Can you put a ScrollView on top a view?

Hi Folks. Can you put a ScrollView on top a standard view? I'm doing the following but cannot see the label?

var view1 = Titanium.UI.createScrollView({
                    contentWidth:'auto',
                    contentHeight:'auto',
                    showVerticalScrollIndicator:true,
                    showHorizontalScrollIndicator:true,
                    top:120,
                    left:10,
                    right:10,
                    bottom:10
                });
                incidentHolder.add(view1);
 
             var hiContent= Ti.UI.createLabel({
                top: 0,
                left: 0,
                right: 0,
                height: 'auto',
                text: 'How do I activate my ...,',
                color:'#222222',
                font:{fontSize:13}
                });
            view1.add(hiContent);

Thanks!!!

Hi, you need to do some changes in the code , like don't set left and right both at a time , you should either use one at a time , same with top and bottom , use only one at a time.

Also provide width and height to scroll view .

Do the following changes and let me know if you still face problem.

Hi Jason

Your code does work and shows the label, so unless you had a view with the same colour background as the text foreground colour - you should have seen it. If not it maybe the fault of the parent view that you have not provided code for.

A good tip when hunting things down is use the backgroundColor property on all views and labels until you are happy with layout and positions. Using this tip you can easily spot what is going right and what is going wrong.

I have tweaked you code a little to show you what you can do by using the Ti.UI.SIZE and Ti.UI.FILL values for widths and heights, try not to use auto if you can help it. [You must be using SDK 2.0 or higher]

var view1 = Titanium.UI.createScrollView({
    backgroundColor: '#fff',
    bottom: 10,
    contentHeight: 'auto',
    contentWidth: 'auto',
    layout: 'vertical',
    left: 10,
    right: 10,
    showHorizontalScrollIndicator: true,
    showVerticalScrollIndicator: true,
    top: 120,
    width: Ti.UI.FILL
});
incidentHolder.add(view1);
 
var hiContent = Ti.UI.createLabel({
    backgroundColor: 'orange',
    color: '#222222',
    left: 0,
    font:{
        fontSize:13
    },
    height: Ti.UI.SIZE,
    right: 0,
    text: 'How do I activate my ...,',
    top: 0,
    width: Ti.UI.SIZE,
});
view1.add(hiContent);    
var hiContent2 = Ti.UI.createLabel({
    backgroundColor: 'yellow',
    color: '#222222',
    left: 0,
    font:{
        fontSize:13
    },
    height: Ti.UI.SIZE,
    right: 0,
    text: 'How do I activate my ...,',
    top: 10,
    width: Ti.UI.SIZE,
});
view1.add(hiContent2);
var hiContent3 = Ti.UI.createLabel({
    backgroundColor: 'green',
    bottom: 50,
    color: '#222222',
    left: 0,
    font:{
        fontSize: 20
    },
    height: Ti.UI.SIZE,
    right: 0,
    text: 'How do I activate my ...,',
    top: 200,
    width: Ti.UI.SIZE,
});
view1.add(hiContent3);

I have added a couple of extra labels so you can see the scrollView will scroll, but only if you exceed the views visible space. Also using the property layout on the scrollView (or other container view) allows you to add child views that stack around each other, this way top, bottom, left and right become margins between each element.