[TIMOB-16540] iOS7: TableViewRow: leftImage property renders improper image alignment

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Invalid
Resolution Date	2014-03-26T21:57:41.000+0000
Affected Version/s	Release 3.2.2
Fix Version/s	n/a
Components	iOS
Labels	qe-3.2.2, supportTeam, triage
Reporter	Paras Mishra
Assignee	Sabil Rahim
Created	2014-03-03T07:18:43.000+0000
Updated	2017-03-20T20:37:47.000+0000

Description

iOS7: TableViewRow: leftImage property renders improper image allignment. It works fine on iOS 6 device(iPOD touch iOS:6.1.3). Issue also occurs on 3.2.1.GA,3.2.0.GA sdk Steps to reproduce: 1. Run the below app.

var win = Ti.UI.createWindow({
	backgroundColor: 'red'
});
createTableRow = function(args){
		  // save the title for our own use
		  var title = args.title;
		  args.title = '';
		  args.left = 42;
		  args.height = 40;
		 
		  var row = Ti.UI.createTableViewRow(args);
		 
		  var label = Ti.UI.createLabel({
		    backgroundColor: 'pink',
		    text: title,
		    textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
		    width: Ti.UI.FILL,
		    height: args.height - 5,
		    left: args.left,
		    font: { fontSize: 17, fontWeight: 'bold'},
		  });
		 
		  row.add(label);
		 
		  row.label_title = title;
		 
		  return row;
		};
		 
		var rows = [];
		rows.push( createTableRow({ title: 'table', leftImage: '/KS_nav_ui.png'}) );
		rows.push( createTableRow({ title: 'row', leftImage: '/KS_nav_ui.png'}) );
		rows.push( createTableRow({ title: 'rock' }) );
		rows.push( createTableRow({ title: 'car', leftImage: '/KS_nav_ui.png'}) );
		rows.push( createTableRow({ title: 'tab' }) );
		rows.push( createTableRow({ title: 'row boat', leftImage: '/KS_nav_ui.png'}) );
		rows.push( createTableRow({ title: 'table row', leftImage: '/KS_nav_ui.png'}) );
		rows.push( createTableRow({ title: 'test', leftImage: '/KS_nav_ui.png'}) );
		rows.push( createTableRow({ title: 'apple' }) );
		 
		var search = Ti.UI.createSearchBar({
		  showCancel: false
		});
		 
		var table = Ti.UI.createTableView({
		  data: rows,
		  search: search,
		  searchHidden: false,
		  filterAttribute: 'label_title',
		  filterCaseInsensitive: true
		});
		 
		win.add(table);
		 
		win.open();

Expected: left image in tableviewrow should be properly alligned. Actual: left image overlaps with the label. Screenshots are attached for iOS7 and iOS:6 devices.

Attachments

File	Date	Size
row_iOS_6.PNG	2014-03-03T07:18:43.000+0000	61569
row_iOS_7.PNG	2014-03-03T07:18:43.000+0000	52521

Comments

Sabil Rahim 2014-03-25

[~egomez] Here is the solution that would work on both ios 6 & 7

   var win = Ti.UI.createWindow({
       backgroundColor: 'red'
   });
   createTableRow = function(args){
   	// save the title for our own use
   	var title = args.title;
   	args.title = '';
   	args.left = 45;
   	args.height = 40;
   	var leftImage = args.leftImage;
   	args.leftImage = '';
   
   	var container = Ti.UI.createView({
   		layout : "horizontal",
   		width : Ti.UI.FILL,
   		height : Ti.UI.FILL,
   	});
   
   	
   	if (leftImage) {
   		var image = Ti.UI.createImageView({
   			image:leftImage,
   			width: 40,
   			height: args.height - 5
   		});
   		args.left= 5;
   		Ti.API.info("args.left : " + args.left);
   		container.add(image);
   	}
   	
   	var row = Ti.UI.createTableViewRow(args);
   	var label = Ti.UI.createLabel({
   		backgroundColor: 'pink',
   		text: title,
   		textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
   		width: Ti.UI.FILL,
   		height: args.height - 5,
   		left: args.left,
   		font: { fontSize: 17, fontWeight: 'bold'},
   	});
   	
   
   	
   	container.add(label)
   	row.add(container);
   
   	row.label_title = title;
   
   	return row;
   };
   
   var rows = [];
   rows.push( createTableRow({ title: 'table', leftImage: '/KS_nav_ui.png'}) );
   rows.push( createTableRow({ title: 'row', leftImage: '/KS_nav_ui.png'}) );
   rows.push( createTableRow({ title: 'rock' }) );
   rows.push( createTableRow({ title: 'car', leftImage: '/KS_nav_ui.png'}) );
   rows.push( createTableRow({ title: 'tab' }) );
   rows.push( createTableRow({ title: 'row boat', leftImage: '/KS_nav_ui.png'}) );
   rows.push( createTableRow({ title: 'table row', leftImage: '/KS_nav_ui.png'}) );
   rows.push( createTableRow({ title: 'test', leftImage: '/KS_nav_ui.png'}) );
   rows.push( createTableRow({ title: 'apple' }) );
   
   var search = Ti.UI.createSearchBar({
   	showCancel: false
   });
   
   var table = Ti.UI.createTableView({
   	data: rows,
   	search: search,
   	searchHidden: false,
   	filterAttribute: 'label_title',
   	filterCaseInsensitive: true
   });
   
   win.add(table);
   
   win.open();

Vishal Duggal 2014-03-26

Use leftImage, rightImage properties with title property. If you are creating a custom layout, then don't use the built in properties, rather create your own ImageViews to show images
Eduardo Gomez 2014-03-27

[~vduggal] Is there a recommended approach for adding the rows to table using insertRowBefore method. Please see the above code posted the 19/Mar/14. Because of this Client is getting the alignment issues. Is there any workaround for this?
Lee Morris 2017-03-20

Closing ticket as invalid.

JSON Source