Titanium ScrollView Doesn't Grow When TableViewRow is Added

Question

I have a scrollview that is defined as follows:

var view = Ti.UI.createScrollView({
    height: '100%',
    width: '100%',
    contentHeight: 'auto', 
    backgroundColor: '#fff',
    showVerticalScrollIndicator: true,
    layout: 'vertical'
});

and at the bottom of the scrollview, I have a tableview. The user can press a button to insert a new row at the top of the tableview. However, when they do this, the scrollview's content area doesn't grow and therefore, the first row (at the bottom of the tableview) doesn't show anymore. Each time the user add's a new row, the oldest one on the bottom doesn't show anymore.

If I were explicitly setting the contentHeight, then I could just add the size of the row each time the user added a new row. I would prefer not to do this though.

Is there any way to automatically grow the scrollview to fit it's children, including new tableview rows?

Answer 1

if you are using an older version of titanium, you can use postLayout callback to update the height appropriately

http://docs.appcelerator.com/titanium/2.0/#!/guide/Transitioning_to_the_New_UI_Layout_System-section-30088148_TransitioningtotheNewUILayoutSystem-BatchLayoutUpdates

if you are using a more recent release then you should review this documentation. Specifically regard Batch Layout Updates and the use of applyProperties call on view objects

http://docs.appcelerator.com/titanium/latest/#!/guide/Transitioning_to_the_New_UI_Layout_System

Answer 2

What is the height of the tableview? I don't think the tableview "grows" with the insertion of a new row. It stays the same size, but you can scroll its content. Just for a test, try logging the height of your tableview before and after adding the row.

Also, as you may know, it's not the best to have a scrollable item as the tableview inside another scrollable item.

Answer 3

The tableview does grow to fit its children. However, if you set the tableview data like

tableView.data = data;

It does not recalculate the height. Rather, you must remove all rows and use the appendRow method or if you only need to add on a row to the end of the table (not the beginning), you can just use the appendRow method without first deleting all rows.