[TIMOB-11019] iOS: horizontalWrap for scrollviews with horizontal layouts do not work when there are nested views

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2012-11-13T19:47:08.000+0000
Affected Version/s	Release 2.1.2
Fix Version/s	Release 3.1.0, 2012 Sprint 23 API, 2012 Sprint 23
Components	iOS
Labels	core, layout, module_scrollview, qe-testadded
Reporter	Ivan Skugor
Assignee	Vishal Duggal
Created	2012-08-20T04:30:28.000+0000
Updated	2013-07-26T11:15:57.000+0000

Description

Problem

ScrollView does not show elements when using "horizontal" layout.

Test case

To see this issue 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: '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();

You should see only first row (Label1 and switch)

Expected result

All data should be visible, like it is on Android (run this example on Android to see how it looks)

Comments

Betty Tran 2012-09-20

To elaborate on the problem described above: When there is a scrollview with layout: horizontal and horizontalWrap: true, the horizontalWrap property works as expected when adding many views to the scroll view. However, if we add an item (a label, button or view for example) to the view the horizontalWrap property does not work and the views continue to be placed horizontally until they do not appear. The following is a simplified example:

   function createContent() {
       var wrapper = Ti.UI.createView({
           width: 200,
           height: 100,
           backgroundColor: 'pink',
       });
         
       var label1 = Ti.UI.createView({
       	height: 100,
       	width: 100,
       	backgroundColor: 'red'
       });
         
       wrapper.add(label1);
         
       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',
       horizontalWrap: true,
       contentHeight: Ti.UI.SIZE,
       contentWidth: Ti.UI.FILL
   });
     
   win.add(scrollView);
     
   for (var i = 0; i < 10; ++i) {
       scrollView.add(createContent());
   }
     
   win.open();

If we do not add the label to the view, then horizontalWrap: true behaves as expected.

Vishal Duggal 2012-11-08

Pull pending https://github.com/appcelerator/titanium_mobile/pull/3396
Shyam Bhadauria 2013-01-21

Environment used for verification - Titanium SDK: 3.1.0.v20130114171802 Titanium Studio: 3.0.1.201212181159 Device : Simulator iOS 6.0, iPHONE 3G S iOS 5.0.1

JSON Source