Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17957] iOS: Vertical layout in ListItem is not rendered properly (parity issue)

GitHub Issuen/a
TypeBug
PriorityNone
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 3.3.0, Release 3.4.0
Fix Version/sn/a
ComponentsiOS
LabelsTCSupport, reprod
ReporterSzymon Tomasz Stefanek
AssigneeUnknown
Created2014-09-06T00:31:26.000+0000
Updated2018-02-28T20:03:50.000+0000

Description

Problem Description

On iOS setting the ListItem template layout to 'vertical' does not render properly. The items are all centered vertically and rendered one over another. This seems to work on Android.

Steps to Reproduce

1. Create a classic project. 2. Paste this code in app.js file. 4. Run this code with the testing environment.
var myTemplate = {

	properties : {
		width : Ti.UI.FILL,
		height : 100,
		layout : 'vertical',
		backgroundColor : 'transparent',
		selectedBackgroundColor : '#a0a000'
	},
	childTemplates : [{
		type : 'Ti.UI.Label',
		bindId : 'title',
		properties : {
			color : '#ffffff',
			backgroundColor : 'transparent',
			font : {
				fontFamily : 'Arial',
				fontSize : 20,
				fontWeight : 'bold'
			},
			touchEnabled : 'false', // so events are propagated to parent
			left : 5,
			width : Ti.UI.SIZE,
			height : Ti.UI.SIZE
		}
	}, {
		type : 'Ti.UI.Label',
		bindId : 'value',
		properties : {
			color : '#ffffff',
			backgroundColor : 'transparent',
			font : {
				fontFamily : 'Arial',
				fontSize : 15
			},
			touchEnabled : 'false', // so events are propagated to parent
			left : 10,
			width : Ti.UI.SIZE,
			height : Ti.UI.SIZE
		}
	}],

};

var items = [{
	title : {
		text : 'Hello'
	},
	value : {
		text : 'How Are You'
	}

}, {
	title : {
		text : 'Hello'
	},
	value : {
		text : 'How Are You'
	}

}, {
	title : {
		text : 'Hello'
	},
	value : {
		text : 'How Are You'
	}

}, {
	title : {
		text : 'Hello'
	},
	value : {
		text : 'How Are You'
	}

}];

var section = Ti.UI.createListSection({
	items : items
});

var list = Ti.UI.createListView({
	sections : [section],
	templates : {
		'template' : myTemplate
	},
	defaultItemTemplate : 'template',
	backgroundColor : '#000'
});

var win = Ti.UI.createWindow({
	title : 'ListView'
});
win.add(list);
win.open();

Comments

  1. Carlos Henrique Zinato 2015-05-29

    This still not working! Using: Titanium SDK 3.5.1.GA, iOS 8.3, Mac OS Yosemite. Working well on Android. iOS: !http://i.imgur.com/HCyVEUM.png?1! Android: !http://i.imgur.com/0QSEjcF.png?1! Please fix it =/
  2. Lee Morris 2017-06-20

    I am able to reproduce this issue with the following environment; iPhone 7 (10.2) Studio 4.9.0.201705302345 Ti SDK 6.1.1.v20170620103414 Appc NPM 4.2.9 Appc CLI 6.2.1 Ti CLI 5.0.13 Alloy 1.9.11 Arrow 2.0.0 Xcode 8.2 (8C38) Node v4.8.2 Java 1.8.0_131

JSON Source