[TIMOB-10506] Android: "ScrollView" does not scroll when it contains "TableView"

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2017-10-02T22:48:21.000+0000
Affected Version/s	Release 3.0.0, Release 3.1.0
Fix Version/s	Release 6.2.2
Components	Android
Labels	core
Reporter	Ivan Skugor
Assignee	Eric Merriman
Created	2012-08-20T03:51:23.000+0000
Updated	2017-10-02T22:48:21.000+0000

Description

Problem

ScrollView does not scroll when it contains TableView.

Test case

To see that, run this example:

function createContent() {
    var wrapper = Ti.UI.createView({
        width: Ti.UI.FILL,
        height: Ti.UI.SIZE,
        backgroundColor: '#f00',
		horizontalWrap: true,
        layout: 'horizontal'
    });
     
    var label1 = Ti.UI.createLabel({
        text: 'Label 1',
        width: '50%'
    });
     
    var cb1 = Ti.UI.createSwitch({
        value: false
    });
     
    wrapper.add(label1);
    wrapper.add(cb1);
     
    return wrapper;
}
 
var win = Ti.UI.createWindow({
    navBarHidden: true
});
 
var scrollView = Ti.UI.createScrollView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
    backgroundColor: '#0f0',
    layout: 'vertical',
    contentHeight: Ti.UI.SIZE,
    contentWidth: Ti.UI.FILL
});
 
win.add(scrollView);
 
for (var i = 0; i < 10; ++i) {
    scrollView.add(createContent());
}
 
var table = Ti.UI.createTableView({
    backgroundColor: '#00f',
    height: Ti.UI.SIZE
});
 
scrollView.add(table);
 
var rows = [];
for (i = 0; i < 25; ++i) {
    rows.push({ title: 'Row ' + i});
}
 
table.setData(rows);
 
win.open();

Try to scroll. You'll see that scrolling is not happening.

Expected result

ScrollView should scroll. Works fine on iOS.

Comments

Arthur Evans 2012-08-30

Note that the docs explicitly recommend against the reverse case--putting a scrollview in a tableview--because nesting two scrolling controls like this can make for unfortunate user experience. We should probably recommend against this case as well. It's true that in iOS, if you size the table view height to Ti.UI.SIZE as you're doing here, it works. It also works on Mobile Web, so you could make an argument for fixing this on Android. However, you can also get the same effect by creating a single table view with two sections, and it works on all three platforms.

   function createContent() {
   	var wrapper = Ti.UI.createView({
   		width : Ti.UI.FILL,
   		height : Ti.UI.SIZE,
   		backgroundColor : '#f00',
   		horizontalWrap : true,
   		layout : 'horizontal'
   	});
   
   	var label1 = Ti.UI.createLabel({
   		text : 'Label 1',
   		width : '50%',
   		height : Ti.UI.SIZE
   	});
   
   	var cb1 = Ti.UI.createSwitch({
   		value : false
   	});
   
   	wrapper.add(label1);
   	wrapper.add(cb1);
   	return wrapper;
   }
   
   var win = Ti.UI.createWindow({
   	navBarHidden : true
   });
   
   var section1 = Ti.UI.createTableViewSection();
   var row;
   for (var i = 0; i < 10; ++i) {
   	row = Ti.UI.createTableViewRow();
   	row.add(createContent());
   	section1.add(row);
   }
   
   var section2 = Ti.UI.createTableViewSection({
   	borderRadius : 10
   });
   for ( i = 0; i < 25; ++i) {
   	section2.add(Ti.UI.createTableViewRow({
   		title : 'Row ' + i
   	}));
   }
   
   var table = Ti.UI.createTableView({
   	backgroundColor : '#00f',
   	data : [section1, section2]
   });
   
   win.add(table);
   win.open();

jithinpv 2013-03-11

Issue reproduces with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 (03/11/13 15:43 0c88429) Titanium SDK version: 3.0.2 (02/07/13 16:46 a4def81) Device: Samsung galaxy s duos Android version: 4.0.4
Joshua Quick 2017-10-02

Nested scrolling support on Android was added in Titanium 6.2.2. See [TIMOB-25086].

JSON Source