Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10003] Android: Ti.UI.SIZE does not work well with nested views

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-09-07T13:38:44.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sSprint 2012-16 Core, Release 2.1.2, Release 3.0.0
ComponentsAndroid
Labelscore, layout, module_view, qe-review, qe-testadded
ReporterIvan Skugor
AssigneeAllen Yeung
Created2012-05-15T05:55:53.000+0000
Updated2012-09-21T00:24:29.000+0000

Description

The problem

It seems that view component does not size itself well when nested views are present. To see this issue, run this example: 
(function() {
	
    var win = Ti.UI.createWindow({ navBarHidden: true, backgroundColor: '#999' });
    
    var parentView = Ti.UI.createView({
    	backgroundColor: '#000',
    	width: Ti.UI.FILL,
    	height: Ti.UI.SIZE,
    	backgroundColor: '#f00'
    });
    
    function createContent() {
    	
    	var view = Ti.UI.createView({
    		top: 0,
    		layout: 'horizontal',
    		width: Ti.UI.FILL,
    		height: Ti.UI.SIZE,
    		backgroundColor: '#0f0'
    	});
    	
    	var header = Ti.UI.createView({
    		width: '90%',
    		height: '75dp',
    		backgroundColor: '#00f'
    	});
    	
    	var label = Ti.UI.createLabel({
    		top: 0,
    		height: '75dp',
    		width: '50%',
    		text: 'Testing ...'
    	});
    	
    	var active = Ti.UI.createSwitch({
    		top: 0,
    		style: Ti.UI.Android.SWITCH_STYLE_CHECKBOX
    	});
    	
    	header.add(label);
    	header.add(active);
    	
    	view.add(header);
    	
    	return view;
    }
    
    for (var i = 0; i < 3; ++i) {
    	parentView.add(createContent());
    }
    
    win.add(parentView);
    
    
    win.open();

})();
You should see only one nested view (one label and one switch).

Expected behavior

"parentView" should size itself according to the size of its content. So, all three child views should be visible (and not only one). This works fine on iOS.

Comments

  1. Allen Yeung 2012-07-19

    I tried on 2.0.1GA2, 2.0.2GA, 2.1.0GA, and they look the same in both iOS and android. Closing as can't reproduce. Feel free to reopen if this still occurs.
  2. Ivan Skugor 2012-07-20

    Hi Allen. I'm still seeing this issue. I modified test example a bit: 
       (function() {
        
       var win = Ti.UI.createWindow({ navBarHidden: true, backgroundColor: '#999' });
        
       var parentView = Ti.UI.createView({
   	layout: 'horizontal',
           width: Ti.UI.FILL,
           //height: 350,
   	height: Ti.UI.SIZE,
           backgroundColor: '#f00'
       });
        
       function createContent() {
            
           var view = Ti.UI.createView({
               top: 10,
               layout: 'horizontal',
               width: Ti.UI.FILL,
   	    height: Ti.UI.SIZE,
               backgroundColor: '#0f0'
           });
            
           var header = Ti.UI.createView({
               width: '90%',
               height: '75dp',
   	    layout: 'horizontal',
               backgroundColor: '#00f'
           });
            
           var label = Ti.UI.createLabel({
               top: 0,
               height: '75dp',
               width: '50%',
               text: 'Testing ...',
   	    backgroundColor: '#ff0'
           });
            
           var active = Ti.UI.createSwitch({
               top: 0
           });
            
           header.add(label);
           header.add(active);
            
           view.add(header);
            
           return view;
       }
        
       for (var i = 0; i < 3; ++i) {
           parentView.add(createContent());
       }
        
       win.add(parentView);
        
        
       win.open();
    
   })();
    Tested on 4.0.3 ICS tablet (Thinkpad tablet) with latest CI build: Titanium SDK version: 2.2.0 (07/19/12 16:01 6d95a75) Here is screenshot. http://i48.tinypic.com/5dkzo3.png As you can see, only first child is visible (and there should be three). I also tested with x86 emulator (with newly created project in Titanium Studio) and I got same result. On iPhone simulator, everything works fine.
  3. Neeraj Gupta 2012-07-20

    Reopening this issue based on last comment.
  4. Allen Yeung 2012-07-20

    This works on the master branch, it looks like https://github.com/appcelerator/titanium_mobile/pull/2613 may have fixed it.
  5. Ivan Skugor 2012-07-22

    Yes, I can confirm this works fine with latest master build. Thanks.
  6. Ivan Skugor 2012-07-31

    Please do not close this issue. The issue still exists (but it is not covered with this test case). I'm working on better test case, but it will take some time. Thanks.
  7. Ivan Skugor 2012-07-31

    This issue turned out to be more simpler and more serious than I thought. Here is simple test case that fails: 
       (function() {
         
       var win = Ti.UI.createWindow({
   		navBarHidden: true,
   		backgroundColor: '#000'
   	});
       
   	var topView = Ti.UI.createView({
       	backgroundColor: '#00f',
   		height: Ti.UI.SIZE,
   		top: 0,
   		width: Ti.UI.DIMENSION_FILL,
   		layout: 'horizontal'
       });
   
   	topView.add(Ti.UI.createLabel({ text: 'Label 1', width: '50%', backgroundColor: '#f00' }));
   	topView.add(Ti.UI.createSwitch({ value: false }));
   	topView.add(Ti.UI.createLabel({ text: 'Label 2', width: '50%', backgroundColor: '#0f0' }));
   	topView.add(Ti.UI.createSwitch({ value: true }));
   	
   	win.add(topView);
   	
   	win.open();
   	
   })();
    Tested with latest CI build (Titanium SDK version: 2.2.0 (07/30/12 21:21 e382067)), v8, Android 4.0.3 (Thinkpad tablet), Mountain Lion. This works fine on iOS simulator and mobile web.
  8. Allen Yeung 2012-07-31

    @Ivan FYI there is no Ti.UI.DIMENSION_FILL constant. It should be Ti.UI.FILL PR Ready: https://github.com/appcelerator/titanium_mobile/pull/2663
  9. Ivan Skugor 2012-08-01

    Yes, you're right, sorry about that - I use that constant name in the framework that I use so I accidentally used it here also. Thanks for the fix.
  10. Ivan Skugor 2012-08-03

    Just tried this fix in my complex app and now layout works much-much better. :) Excellent! Thanks.
  11. Ivan Skugor 2012-08-03

    Actually, there are still some minor issues (when content is table view), I'll make new test case soon.
  12. Ivan Skugor 2012-08-06

    I commented issue with table view in TIMOB-9966.
  13. Evgenii Tcarev 2012-08-13

    Verified fixed with: Titanium Studio, build: 2.1.1.201207271312 SDK version: 2.2.0.v20120810194112 Devices: LG VS910 4G (2.3.6) LG-V909 (3.1)
  14. Ping Wang 2012-08-14

    PR for 2_1_X branch: https://github.com/appcelerator/titanium_mobile/pull/2741
  15. Ping Wang 2012-08-14

    Reopen to update fix version.
  16. Anshu Mittal 2012-09-06

    Reopening to update labels
  17. Quang Pham 2012-09-06

    This fix broke my app. when the View have width: Ti.UI.SIZE, its width should be the total width of its contents but now, it act the same as width: Ti.UI.FILL (its width fill all the space) var win = Ti.UI.createWindow({ backgroundColor: 'white' }); var view = Ti.UI.createView({ width: Ti.UI.SIZE, height: 30, layout: 'horizontal', backgroundColor: 'red' }); view.add(Ti.UI.createLabel({ text: 'Hello', height: 30, top: 0, color: 'white' })); view.add(Ti.UI.createLabel({ text: 'From Titanium', height: 30, top: 0, color: 'blue', left: 5 })); win.add(view); win.open();
  18. Allen Yeung 2012-09-07

    Reopening since it seems to have caused a regression with size behavior on width and horizontal layout
  19. Allen Yeung 2012-09-07

JSON Source