[AC-3122] iOS: TableView with custom labels, blank until scrolled up/down from visible/invisible area.
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | n/a |
Status | Closed |
Resolution | Invalid |
Resolution Date | 2012-08-13T06:50:08.000+0000 |
Affected Version/s | n/a |
Fix Version/s | n/a |
Components | Titanium SDK & CLI |
Labels | 2.1, iOS, labels, tableview, tableviewrow |
Reporter | Yoram |
Assignee | Betty Tran |
Created | 2012-07-10T03:54:40.000+0000 |
Updated | 2016-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
File | Date | Size |
---|---|---|
IMG_1668.PNG | 2012-08-07T07:59:00.000+0000 | 29103 |
IMG_1669.PNG | 2012-08-07T07:59:00.000+0000 | 30495 |
IMG_1670.PNG | 2012-08-07T07:59:00.000+0000 | 24192 |
IMG_1671.PNG | 2012-08-07T07:59:00.000+0000 | 29980 |
IMG_1672.PNG | 2012-08-07T07:59:00.000+0000 | 27299 |
TableWidthRenderProblems.MOV | 2012-08-07T07:59:00.000+0000 | 3545132 |
Hi, Can you provide a code sample that reproduces the issue? Regards, Betty
*{color:red} Please review this critical bug again, I added some screenshots and even a video shows the problem{color}*
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 :-(
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?
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:
{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").