Hello

I'm working on some code that displays a list of rows in a table. Each row has 2 labels in it, and a fixed height of 50. When clicked, a row should expand to "auto" height, and contract to 50 pixels when clicked again. This part works.

But when rendering the table initially, I get a lot of overflow from previous rows, on top of the next rows.

I'm looking for a way to explicitly tell it to hide any overflow when decreasing the height.

Here is the code and screenshot:

var rowdata=[];
for(var i=0;i<10;i++){
    var row=Titanium.UI.createTableViewRow({
        height:50,
        layout:'vertical',
        hasDetail:'true'
    });
    row.expanded=false;
    var title=Titanium.UI.createLabel({
        text:"Bla bla bla st",
        font:{fontWeight:'bold',fontSize:18},
        height:'auto'

    });
    row.add(title);
    row.addEventListener('click',function(e){
        Titanium.API.info(e);
        if(e.row.expanded){
            e.row.height=50;
            Titanium.API.info("set to 50");
            e.row.expanded=false;
        }
        else{
            e.row.height='auto';
            Titanium.API.info("set to auto");
            e.row.expanded=true;
        }

        //Titanium.API.info(row.children);
    });
    var content=Titanium.UI.createLabel({
        text:"this is a line\nAnd this is anothe line\nYes it is\nThis is the last line",
        font:{fontWeight:'normal',fontSize:12},
        height:'auto'

    });
    row.add(content);
    rowdata[i]=row;
}

var table2=Titanium.UI.createTableView({
    data:rowdata    
});