Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16552] Android: Table View Row alignment getting disturbed when using Class Name

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-03-17T18:17:47.000+0000
Affected Version/sRelease 3.2.1
Fix Version/s2014 Sprint 06, 2014 Sprint 06 SDK, Release 3.3.0
ComponentsAndroid
Labelsmodule_tableviewrow, qe-closed-3.2.3, qe-testadded, regression, supportTeam
ReporterMarco Cota
AssigneeSunila
Created2014-03-05T16:41:18.000+0000
Updated2014-08-15T21:16:54.000+0000

Description

Issue

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.

Test case

app.js
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();

Steps to Repro

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.

Testing

When removing the class name the rows work as expected. Also this issue is not present on SDK 3.1.3 and prior

Comments

  1. Sunila 2014-03-16

    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
  2. Neha Mittal 2014-04-18

    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.
  3. Osama Abbas 2014-08-15

    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.

JSON Source