[TIMOB-9116] iOS: Height of view is not correct in new layout system when using horizontal layout

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-07-11T01:34:00.000+0000
Affected Version/s	Release 2.0.1
Fix Version/s	Release 2.1.0, Sprint 2012-12 Core
Components	iOS
Labels	core, module_view, qe-testadded
Reporter	Jick Steen
Assignee	Max Stepanov
Created	2012-04-23T09:15:16.000+0000
Updated	2012-07-11T13:49:52.000+0000

Description

Problem

I'm currently migrating my app to the new layout system of Titanium Mobile 2.0. There is just one issue where I think the height of a view is not correct calculated.

Test Case

var win = Ti.UI.createWindow({backgroundColor: 'white'});
win.open();
 
var view = Ti.UI.createView({backgroundColor: 'red', layout: 'horizontal', left: 0, top: 5, width: Ti.UI.FILL, height: Ti.UI.SIZE});
 
view.add(Ti.UI.createLabel({backgroundColor: 'green', 
                            left: 10, top: 4, color: 'black', width: Ti.UI.SIZE, height: Ti.UI.SIZE,
                            text: 'This is a test'}));
 
win.add(view);

Result

The red view is much higher than the label (green background). Cause I used Ti.UI.SIZE I expect that the red view is as high as the label. It works as expected when not defining the left and top property in the label. But I do have to set these. Otherwise I can't create the layout I want.

view.add(Ti.UI.createLabel({backgroundColor: 'green', 
                            color: 'black', width: Ti.UI.SIZE, height: Ti.UI.SIZE,
                            text: 'This is a test'}));

Community Discussion

[Q&A](http://developer.appcelerator.com/question/135813/ios-height-of-view-not-correct-when-using-horizontal-layout-ti-201)

Comments

Junaid Younus 2012-05-11

Moved to appropriate section.

Max Stepanov 2012-06-12

Test case 1:

   var win = Ti.UI.createWindow({backgroundColor: 'white'});
   win.open();
     
   var view = Ti.UI.createView({backgroundColor: 'red', layout: 'horizontal', left: 0, top: 5, width: Ti.UI.FILL, height: Ti.UI.SIZE});
     
   view.add(Ti.UI.createLabel({backgroundColor: 'green', 
                               left: 10, color: 'black', width: Ti.UI.SIZE, height: Ti.UI.SIZE,
                               text: 'This is a test'}));
     
   win.add(view);
   // green label height == red view height

Test case 2:

   var win = Ti.UI.createWindow({backgroundColor: 'white'});
   win.open();
     
   var view = Ti.UI.createView({backgroundColor: 'red', layout: 'horizontal', left: 0, top: 5, width: Ti.UI.SIZE, height: Ti.UI.SIZE});
     
   view.add(Ti.UI.createLabel({backgroundColor: 'green', 
                               top: 4, color: 'black', width: Ti.UI.SIZE, height: Ti.UI.SIZE,
                               text: 'This is a test'}));
     
   win.add(view);
   // green label width == red view width
   // 4px gap above green label.

Max Stepanov 2012-06-12

PR pending https://github.com/appcelerator/titanium_mobile/pull/2377
Michael Pettiford 2012-06-14

Closing issue Tested with Ti Studio build 2.1.0.201206131907 Ti Mobile SDK 2.1.0.v20120613210250 hash rc8ddb29e OSX Lion 10.7.3 iPhone 4S OS 5.1 Verified te sizing of the views and labels is correct
Neha Chhabra 2012-07-11

Reopening to update labels.

JSON Source