When using the classname in the rows the alignment starts to get disturbed and some rows get cut off, if the classname is removed the alignment works ok but customer reports a slow performance during the scroll.
var osname = Ti.Platform.osname, version = Ti.Platform.version, height = Ti.Platform.displayCaps.platformHeight, width = Ti.Platform.displayCaps.platformWidth;
var win = Ti.UI.createWindow({
backgroundColor : 'white',
title : 'TableView Demo'
});
var defaultFontSize = Ti.Platform.name === 'android' ? 16 : 14;
var data = [];
var tableData = [{
title : "dhvdk hdkhgdks kldhfkld hdklfk ",
subTitle : ' bdfkjd fdhfh dfhdsf dfh d dhfd fhdfhd fdlfh '
}, {
title : " dfdj",
subTitle : 'bdbfdfdfdf,bd'
}, {
title : " bdfbdjbfjdbfdjbfdjkfhdjhfdjhfdjkhfjdbfjdhfjdfhjdhfjdhfdjhfjdhf jdfhjdfhdjfhdjhfdh",
subTitle : 'dfbdbfdjbjdbsfjdhfjdksfjsfhdjksfhdjksbfdjkbfvdbfdjkbfjkdfhdjkbfh fjdfhjdfhdjk f fdjfhdjhfdjhf'
}, {
title : " dffdfdfdfdfdfd",
subTitle : 'fdfdfdfsssdfdsfdsfdfdfdfdfdfdfd'
}, {
title : "fdfd",
subTitle : 'fdfdfdfd'
}, {
title : "fdfssssssghjgjhjj",
subTitle : 'gfgfgfdgfgfgfgfgfgf'
}, {
title : "gfgfgfg",
subTitle : 'gfgfgfgfgffgfg'
}, {
title : "gfgfgfgf",
subTitle : 'gfgfgfgfgfggfgfgfgfgfgf fgfgfdgfgfdgfgfd gfgfgf'
}, {
title : "gfgfgfgfgfgfgfgfgfgfgfgfgf fgfgfgfgfg",
subTitle : ' gfgfgf gfgfgf gfgfg gfgfgfg'
}, {
title : "ffgg fgfgfg fggfg",
subTitle : 'gfgfgfgfg'
}, {
title : "fgfgf",
subTitle : 'gfgfgffggg'
}, {
title : "gfgfererere",
subTitle : 'gfgfgf'
}, {
title : "ggff",
subTitle : 'gffdgfdgfdgodjfdojfdjfj fdjfdjkfd;jf'
}, {
title : "fdfddfdfdshfhdhfdhflssssssssssssss dhlfffffffff dflhhhhhhhhh",
subTitle : 'fdfdfdgd fdfd fdfd dfdf dfd '
}, {
title : "fdfdfdf dfdfdf ",
subTitle : 'fd'
}, {
title : "fdfdf fdf ",
subTitle : ''
}, {
title : "fdfdfd",
subTitle : 'fdfdfdf'
}];
for (var i = 0; i < tableData.length; i++) {
var row = Ti.UI.createTableViewRow({
className : 'forumEvent' + (i % 2),
selectedBackgroundColor : 'green',
layout : 'horizontal'
});
var labelUserName = Ti.UI.createLabel({
color : '#576996',
font : {
fontFamily : 'Arial',
fontSize : defaultFontSize,
fontWeight : 'bold'
},
text : tableData[i].title,
backgroundColor : 'red',
left : 10,
top : 10,
horizontalWrap : true,
width : '85%'
});
row.add(labelUserName);
var labelDetails = Ti.UI.createLabel({
color : '#222',
backgroundColor : 'yellow',
font : {
fontFamily : 'Arial',
fontSize : defaultFontSize,
fontWeight : 'normal'
},
text : tableData[i].subTitle + '.',
left : 10,
bottom : 10,
horizontalWrap : true,
width : '85%'
});
row.add(labelDetails);
data.push(row);
}
var tableView = Ti.UI.createTableView({
backgroundColor : 'white',
data : data,
separatorColor : 'black'
});
win.add(tableView);
win.open();
1. Run the testcase
2. Scrolldown the tableview
Expected Results: The rows should look correctly aligned and completely visible.
Actual Results: Some of the rows are cut off and extra space is added in others.
When removing the class name the rows work as expected. Also this issue is not present on SDK 3.1.3 and prior
When view heirarchies are same, reset the content height and width to -1 so that it is calculated again based on children https://github.com/appcelerator/titanium_mobile/pull/5483
Verified fix with following environment: Appc Studio: 3.2.3.201404162038 SDK build: 3.2.3.v20140417162517 and 3.3.0.v20140417173316(Master build) acs: 1.0.14 npm: 1.3.2 alloy:1.3.1 CLI: titanium@3.2.3-beta titanium-code-processor:1.1.1-beta1 Xcode: 5.1.1 Osx: Mavericks(10.9.2) Device: Nexus 7 (4.3) The rows are correctly aligned and completely visible without any truncation. Hence closing the issue.
This issue still there. At least on Android 4.1 and Android 4.2. Please download the code sample and try with/without className property. Scroll down and you will see the text is complete when className is removed, but when className is the result is different.