Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-7561] MobileWeb: ScrollView confused about its content width

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-02-21T19:01:33.000+0000
Affected Version/sRelease 2.0.0
Fix Version/sSprint 2012-04, Release 2.0.0
ComponentsMobileWeb
Labelsqe-port, stage2
ReporterPatrick Seda
AssigneeBryan Hughes
Created2012-02-06T17:08:10.000+0000
Updated2012-08-16T11:29:19.000+0000

Description

A ScrollView with a child container View gets confused about its visible width. To reproduce, run the following code in MobileWeb. The leftmost (red) View is truncated as shown in screenCaptures.
var win = Ti.UI.createWindow({backgroundColor:'#ccc'});
var scroller = Ti.UI.createScrollView({
	backgroundColor : '#fff',
	borderColor : '#333',
	top : 40,
	width : 500,
	height : 200,
	contentWidth : 'auto',
	scrollType : 'horizontal'
});
var container = Ti.UI.createView({
	layout : 'horizontal',
	width : 'auto', // or 800
	height : 'auto'
});
var redView =   Ti.UI.createView({backgroundColor:'#e66', height:150, width:200});
var greenView = Ti.UI.createView({backgroundColor:'#6e6', height:150, width:200});
var blueView =  Ti.UI.createView({backgroundColor:'#66e', height:150, width:200});
var pinkView =  Ti.UI.createView({backgroundColor:'#e6e', height:150, width:200});

win.add(scroller);
scroller.add(container);
container.add(redView);
container.add(greenView);
container.add(blueView);
container.add(pinkView);

win.open();

Attachments

FileDateSize
scrollView_iOS.tiff2012-02-06T17:08:10.000+00005916
scrollView_mobileWeb.tiff2012-02-06T17:08:10.000+00006078

Comments

  1. Bryan Hughes 2012-02-06

    This is a very interesting case. I'm actually not certain that our behavior is incorrect. What is happening is that you declared a container view and didn't assign it a left/top/right/bottom/center value. This causes it to default to a center of "50%,50%". The behavior of the layout algorithm is that if you do a percent based parameter inside of auto, it goes up the chain until it finds a non-auto width/height value. In this case, that non-auto value is the scrollview. This causes the center of the container to be pegged to the center of the scrollview, exactly as you are seeing above. The proper solution is for you to define a left value of 0 on the container to position it where you want to (or not use a container at all, it's not really necessary). I'll leave this open for now though because it is a parity issue.
  2. Bryan Hughes 2012-02-21

    Pull Request: https://github.com/appcelerator/titanium_mobile/pull/1476
  3. Bryan Hughes 2012-02-21

    To solve this elegantly, I added a new type of layout specific for mobile web called "UncenteredAbsolute" that ScrollView now defaults to. This way, the absolute layout remains universal, but we still get the proper behavior in scroll view.
  4. Lokesh Choudhary 2012-08-16

    Verified fix on: Titanium studio : 2.1.1.201207271312 SDK version : 2.2.0.v20120816015712 Android 4.0.4 - default ,chrome 18.0 , firefox 14.0.1 Iphone 5.1.1 - safari mobile Mountain lion(10.8) - chrome 21.0,safari 6,firefox 14.0.1 Win 7 - IE 9

JSON Source