Question

I’ve made a two-tab app in Appcelerator. There is a registration page within the app which is longer than the viewable area. The content is inside of a scrolling view. The scroll view height is set to auto. For some reason, the content overlaps the tab bar at the bottom of the screen. Obviously, I can just give the scroll view a set height, but I would really like to know how to get this to happen automatically. I’m sure I’m doing something wrong, but cannot figure out what. All help is greatly appreciated.

Here’s the creation of the scroll view:

var form = Ti.UI.createScrollView({
contentHeight: 'auto',
contentWidth: 'auto',
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:true,

// new stuff
container: container,
fieldStyle: o.style || exports.STYLE_HINT,
addField: addField,
addFields: addFields
});

And my tabs:

var tabMain = Titanium.UI.createTab({
    icon:'tabServer.png',
    title:'Servers',
    window:winMain,
    navBarHidden:true
});

var tabContact = Titanium.UI.createTab({
    icon:'tabContact.png',
    title:'Contact Us',
    window:winContact,
    navBarHidden:true
});

//  add tabs
tabGroup.addTab(tabMain);  
tabGroup.addTab(tabContact);  


// open tab group
tabGroup.open();

The form is not created or added to the window until after the tab group is added. I’m not really sure what other code would be considered relevant, so just let me know if you need to see anything else and I will add it. Thanks~

Answer 1

I found the issue. This was caused by me setting the height of my window myself instead of using 'auto'. Once I set it to auto, it took into account the tab bar automatically… Go figure.