Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-11998] iOS: Layout bug: horizontal layout Views with height=Ti.UI.SIZE are drawn with wrong height

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-12-18T21:24:27.000+0000
Affected Version/sRelease 2.1.2, Release 2.1.3, Release 2.1.4, Release 3.0.0
Fix Version/sRelease 3.0.1, Release 3.1.0, 2012 Sprint 26 API, 2012 Sprint 26
ComponentsiOS
Labelscore, horizontal_layout, module_window, parity, qe-testadded, triage
ReporterShawn Lipscomb
AssigneeVishal Duggal
Created2012-12-07T16:17:43.000+0000
Updated2014-06-19T12:43:58.000+0000

Description

Problem description

Horizontal views are not sizing correctly vertically when their height is set to Ti.UI.SIZE. The red view should not be visible, since it should be exactly the same size as the yellow view which is inside it. The yellow view is too tall... it should be exactly the same height as the black boxes. The blue view should not be visible, since it should be exactly the same size as the orange view which is inside it.

Horizontal views that have wrapping children do not wrap correctly... the wrapped child views are vertically positioned much lower than they should be. The 3 black boxes in the orange (horizontal) view are all added to the orange view sequentially, and therefore should appear as they do in the attached Android image. In iOS, the 3rd box is wrapped with a large vertical gap.

See the attached images. The first image is from the Android emulator, and appears correctly. The second image is from the iPhone simulator and shows the problem. This is a layout parity issue.

Test case

{panel:title=app.js}
var win1 = Ti.UI.createWindow({
	layout : 'vertical',
	backgroundColor : 'gray'
});

function Panel(PanelWidth) {
	return Ti.UI.createView({
		borderColor : 'black',
		width : PanelWidth,
		height : Ti.UI.SIZE,
		layout : 'vertical',
		left : 0,
		top : 0,
		borderWidth : 2,
		borderRadius : 5
	});
}

function PanelLabel(ParentView, Title) {
	var l1 = Ti.UI.createLabel({
		text : Title + '\n ',
		left : '8dp',
		right : '8dp'
	});
	ParentView.add(l1);
}

var HeaderView1 = Ti.UI.createView({
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE,
	layout : 'horizontal',
	backgroundColor : 'yellow'
});
var PanelWidthWide = '45%';
var PanelWidthNormal = '35%';
var PanelWidthExtra = '40%';

var Row1Box1 = Panel(PanelWidthWide);
PanelLabel(Row1Box1, 'Row1Box1');
HeaderView1.add(Row1Box1);

var Row1Box2 = Panel(PanelWidthWide);
PanelLabel(Row1Box2, 'Row1Box2');
HeaderView1.add(Row1Box2);

var HeaderView2 = Ti.UI.createView({
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE,
	layout : 'horizontal',
	backgroundColor : 'orange'
});

var Row2Box1 = Panel(PanelWidthNormal);
PanelLabel(Row2Box1, 'Row2Box1');
HeaderView2.add(Row2Box1);

var Row2Box2 = Panel(PanelWidthExtra);
PanelLabel(Row2Box2, 'Row2Box2');
HeaderView2.add(Row2Box2);

var Row2Box3 = Panel(PanelWidthNormal);
PanelLabel(Row2Box3, 'Row2Box3');
HeaderView2.add(Row2Box3);

var Row1 = Ti.UI.createView({
	backgroundColor : 'red',
	height : Ti.UI.SIZE,
	width : Ti.UI.SIZE,
	left : 0,
	layout : 'horizontal'
});
Row1.add(HeaderView1);

var Row2 = Ti.UI.createView({
	backgroundColor : 'blue',
	height : Ti.UI.SIZE,
	width : Ti.UI.SIZE,
	left : 0,
	layout : 'horizontal'
});
Row2.add(HeaderView2);

win1.add(Row1);
win1.add(Row2);
win1.open();
{panel}

Attachments

FileDateSize
AndroidScreenShot.png2012-12-07T16:17:43.000+000013316
iPhoneScreenShot.png2012-12-07T16:17:43.000+000016933

Comments

  1. Daniel Sefton 2012-12-07

    Tested and confirmed in iOS 6 simulator, Android emulator on Ti SDK 2.1.2 GA, 2.1.3 GA, 2.1.4 GA and 3.0 RC. All versions consistent with attached screenshots EXCEPT between 2.1.4 GA and 3.0 RC where the boxes in the Android emulator are in fact smaller, including the font.
  2. Vishal Duggal 2012-12-11

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/3572
  3. Vishal Duggal 2012-12-27

    Backport PR to 3_0_X https://github.com/appcelerator/titanium_mobile/pull/3636
  4. Shawn Lipscomb 2013-01-02

    HD ticket: [APP-233365](http://support.appcelerator.com/tickets/APP-233365)
  5. Shyam Bhadauria 2013-01-03

    Views with height=Ti.UI.SIZE are rendering as expected. Verified with following Titanium SDK: 3.1.0.v20130102102603 Titanium SDK:3.0.1.v20121228113204 Titanium Studio:3.0.1.201212181159 Device: iPad4 iOs 6.0
  6. Shawn Lipscomb 2013-01-14

    Verified fixed with SDK 3.1.0.v20130109175536

JSON Source