[TIMOB-7561] MobileWeb: ScrollView confused about its content width
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2012-02-21T19:01:33.000+0000 |
Affected Version/s | Release 2.0.0 |
Fix Version/s | Sprint 2012-04, Release 2.0.0 |
Components | MobileWeb |
Labels | qe-port, stage2 |
Reporter | Patrick Seda |
Assignee | Bryan Hughes |
Created | 2012-02-06T17:08:10.000+0000 |
Updated | 2012-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
File | Date | Size |
---|---|---|
scrollView_iOS.tiff | 2012-02-06T17:08:10.000+0000 | 5916 |
scrollView_mobileWeb.tiff | 2012-02-06T17:08:10.000+0000 | 6078 |
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.
Pull Request: https://github.com/appcelerator/titanium_mobile/pull/1476
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.
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