[TIMOB-9966] Android: ScrollView not scrolling with horizontal layout

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-09-11T20:11:25.000+0000
Affected Version/s	Release 2.0.2
Fix Version/s	Sprint 2012-15 Core, Release 3.0.0, Sprint 2012-19 Core
Components	Android
Labels	core, layout, module_scrollview, qe-review, qe-testadded
Reporter	Allen Yeung
Assignee	Allen Yeung
Created	2012-07-16T11:02:14.000+0000
Updated	2012-12-19T21:46:09.000+0000

Description

The following test case does not work with horizontal layout:

var win = Ti.UI.createWindow();
win.open();
  
var scrollView = Ti.UI.createScrollView({
    contentHeight:'auto',
    contentWidth:0,
    layout:'horizontal',
    backgroundColor: 'green'
});
win.add(scrollView);
 
var colors = ['red', 'blue', 'pink', 'white', 'black'];
  
var max = 120;
for(var i = 0; i < max; i++){
    scrollView.add(Ti.UI.createView({
        backgroundColor: colors[i%colors.length],
        height: 100,
        left: 10,
        width: 100,
        top: 10
    }));
}

When we have an inner view with size behavior and a horizontal layout child, The scroll view does not scroll either:

var win = Ti.UI.createWindow();
win.open();
  
var scrollView = Ti.UI.createScrollView({
    contentHeight:'auto',
    contentWidth:0,
    backgroundColor: 'green'
});
win.add(scrollView);
  
var innerView = Ti.UI.createView({
    height:Ti.UI.SIZE, // works if set to 1000
    layout:'horizontal',
    left:0,
    top:0,
    right:0
});
scrollView.add(innerView);
  
var colors = ['red', 'blue', 'pink', 'white', 'black'];
  
var max = 120;
for(var i = 0; i < max; i++){
    innerView.add(Ti.UI.createView({
        backgroundColor: colors[i%colors.length],
        height: 100,
        left: 10,
        width: 100,
        top: 10
    }));
}

Expected Result (for both test cases): The scroll view should be able to scroll vertically. (works in iOS) Actual Result (for both test cases): It does not scroll

Comments

Allen Yeung 2012-07-19

PR Ready: https://github.com/appcelerator/titanium_mobile/pull/2613
Martin Guillon 2012-07-21

I can confirm it works! Thanks a lot Allen

Ivan Skugor 2012-08-06

There are still some issues here. It seems that scroll view cannot scroll when it contains table view (there is no problem with other content). Here is my test case:

   
   function createContent() {
   	var wrapper = Ti.UI.createView({
   		width: Ti.UI.FILL,
   		height: Ti.UI.SIZE,
   		backgroundColor: '#f00',
   		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: 'horizontal',
   	//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();

My environment info: Titanium SDK version: 2.2.0 (08/03/12 16:41 9c1640f) v8 Android 4.0.3 Thinkpad Tablet Mountain Lion If you run this example, you should see that scroll view cannot scroll. The same example does not work on iOS, it seems that horizontal layout is causing it (most of the content is not visible on the screen). If horizontal layout is replaced with vertical, it works fine. Android on the other hand has issue with vertical layout. It seems that vertical layout works like horizontal.

Ping Wang 2012-08-14

PR for 2_1_X branch: https://github.com/appcelerator/titanium_mobile/pull/2741
Neeraj Gupta 2012-08-19

@Ivan - It would be great if you can create a new ticket for the remaining issue so that we can test it out separately.
Ivan Skugor 2012-08-20
Tamila Smolich 2012-08-20

Closing as fixed. Tested and verified on: Titanium Studio, build: 2.1.1.201208091713 Titanium SDK, build: 2.1.2.v20120816171609 Devices: Nexus 7 tab (4.1.1), HTC Evo (4.0.3), Android Emulator 2.2
Etienne Champetier 2012-09-04
Etienne Champetier 2012-09-04
Neha Chhabra 2012-09-07

ScrollView not scrolling . Tested with Titanium Studio:2.1.2.201208301612 Tested with Titanium SDK: 2.2.0.v20120831200114
Allen Yeung 2012-09-11

Closing the ticket again. The original test case still works fine, and there are two separate tickets for the issues mentioned in this ticket.
Allen Yeung 2012-09-11

Reopening to change time left

JSON Source