Titanium JIRA Archive
Appcelerator Community (AC)

[AC-3122] iOS: TableView with custom labels, blank until scrolled up/down from visible/invisible area.

GitHub Issuen/a
TypeBug
Priorityn/a
StatusClosed
ResolutionInvalid
Resolution Date2012-08-13T06:50:08.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labels2.1, iOS, labels, tableview, tableviewrow
ReporterYoram
AssigneeBetty Tran
Created2012-07-10T03:54:40.000+0000
Updated2016-03-08T07:48:11.000+0000

Description

I have a custom labels/views/buttons/images in my rows. When displaying the TableView, all seems to be ok but when I scroll down to see more rows, they appears fine (images/buttons) except of the labels which seems to have like blank. I noticed that their alignment is wrong, like didn't rendered. If I set numbers into the width/height of the label, then it's ok but if I set Ti.UI.SIZE or Ti.UI.FILL it's bad. Another strange behave is if I scroll down and up again then all scrolled labels becomes ok. Another issue is if I rotate my device, the labels are not aligned ok, I need to rotate to landscape/portrait and scroll up/down and sometimes it's ok, but only part of the table. I'm using appendRow to add my custom rows (and I have not more than 30 rows anyway). *I'm attaching the next code sample and some screenshots + Video shows the problem.* {panel:title=app.js| borderStyle=dashed| borderColor=#ccc| titleBGColor=#F7D6C1| bgColor=#FFFFCE}
Titanium.UI.setBackgroundColor('#000');

var win1 = Titanium.UI.createWindow({  
    title:'Table Render Problems',
    
    backgroundColor:'yellow',
    orientationModes: [
		Ti.UI.PORTRAIT,
		Ti.UI.UPSIDE_PORTRAIT,
		Ti.UI.LANDSCAPE_LEFT,
		Ti.UI.LANDSCAPE_RIGHT
	]
});
win1.open();
Ti.UI.iPhone.hideStatusBar({animated:false});

var totalCounter = 0;
function getRowLink() {
	var	row = Ti.UI.createTableViewRow({
			layout: 'vertical',
			selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE,
			backgroundColor: '#ccc',
			height: Ti.UI.SIZE,
			moveable: true
		}),
		viewRow = Ti.UI.createView({
			layout: 'vertical',
			height: Ti.UI.SIZE,
			width: Ti.UI.SIZE,		// <-- TRY TO PLAY WITH THIS LINE AS WELL (2.0+ Tweak) - NOTHING HELPS
			top: 10, bottom: 0,
			right: 10, left: 10,
			backgroundColor: 'red'
		}),
		viewItem = Ti.UI.createButton({
			layout: 'absolute',
			height: 44,
			backgroundColor: 'blue',
			style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
			top: 0, bottom: 0, left: 0, right: 0
		});

	viewItem.add(Ti.UI.createLabel({
		touchEnabled: false,
		color: '#fff',
		font:{fontSize:16,fontWeight:'bold', fontFamily:'Arial'},
		textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
		width: Ti.UI.FILL,			// <-- TRY TO PLAY WITH THIS LINE AS WELL (2.0+ Tweak) - NOTHING HELPS
		left:44, right: 6,
		top:12,
		height:18,
		text: 'TEST LINE - ' + (totalCounter++)
	}));

	viewRow.add(viewItem);
	row.add(viewRow);

	return row;
}

var myTable = Ti.UI.createTableView({editable: true});

for (var i=0; i < 50; i++) {
	myTable.appendRow(getRowLink());
};

win1.add(myTable);

/*
 * Try to add --> 	width: Ti.UI.SIZE 
 * 					width: Ti.UI.FILL
 * or just remove it...
 * Nothins helps :-(
 * 
 * Please do not suggest to set a number for the width because that's not the idea, the idea is to keep the width changeable to it's space.
 * 
 */
{panel}

Attachments

FileDateSize
IMG_1668.PNG2012-08-07T07:59:00.000+000029103
IMG_1669.PNG2012-08-07T07:59:00.000+000030495
IMG_1670.PNG2012-08-07T07:59:00.000+000024192
IMG_1671.PNG2012-08-07T07:59:00.000+000029980
IMG_1672.PNG2012-08-07T07:59:00.000+000027299
TableWidthRenderProblems.MOV2012-08-07T07:59:00.000+00003545132

Comments

  1. Betty Tran 2012-07-17

    Hi, Can you provide a code sample that reproduces the issue? Regards, Betty
  2. Yoram 2012-08-07

    *{color:red} Please review this critical bug again, I added some screenshots and even a video shows the problem{color}*
  3. Yoram 2012-08-07

    Once again, it's working great on v1.8.0.1 (which currently on AppStore) and I can't move on to latest Titanium 2+ version :-(
  4. Yoram 2012-08-07

    Btw, I tested provided code (remarking the iPhone parts) on the *{color:green}Android Emulator{color}* and it's not even showing the Labels... only blue rows... do you have any idea why?
  5. Betty Tran 2012-08-09

  6. Yoram 2012-08-09

    First of all it's a bug because it worked before and even following full layout changes, it doesn't really help. But, you did help me :-)! ... mentioning the "*ButtonView*" problem on Android and seems to be like iOS has kind of "*BUG*" as for nesting *LabelView* inside the *Button* (because, again, it WORKED before!). So, I played... trying to keep that *Button* I have (because I MUST have it as for as my complicated design), but what I did, instead of inserting all my *Labels + Images* inside that *Button*, I first insert all into new *View* and then I just added this new *View* into that *Button* (setting height/width to *Ti.UI.FILL*). Like that:
       Table -->
         Row -->
           Button --> *NEW VIEW* -->
             Label
             Label
             ...
       
       
    {color:blue}*That's SOLVED my problem !!!*{color} So, Thanks to your help I found a "Tweak" but once again, it's a bug related to {color:red}nesting *Label* inside a *Button*{color}. Anybody who places a label inside a button inside a row of table will noticed that right away (and when you scroll up and down it suddenly "fixed").

JSON Source