Layout issues after migrating to 2.0

You must Login before you can answer or comment on any questions.

Hi guys,

I have the following code:

var tableView = Ti.UI.createTableView({
    style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
});
 
var tableRow = Ti.UI.createTableViewRow({
    height: Ti.UI.SIZE,
    className: 'address',
    address: some_text.replace(/(\r\n|\r|\n)/g, " "),
    layout: 'horizontal',
    hasChild: true
});
 
function DetailText(text) {
 
    return Ti.UI.createLabel({
        backgroundColor: 'yellow',
        text: text ? text.replace(/(\r\n|\r|\n)/g, " ") : '',
        top: 10,
        // bottom: 10,
        // left: 10,
        // right: 10,
        font: {
            fontSize: 13,
            fontWeight: 'bold'
        },
        height: Ti.UI.SIZE,
        width: Ti.UI.SIZE,
    });
}
 
function DetailLabel(text) {
 
    return Ti.UI.createLabel({
        backgroundColor: 'cyan',
        color: '#516691',
        height: Ti.UI.SIZE,
        text: text,
        top: 10,
        // left: 0,
        width: 75,
        textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
        font: {
            fontSize: 13,
            fontWeight: 'bold'
        }
    });
}
Here is a link with the result: First screenshot

The problem is that the rows in the red area are always displayed wrong if I use Ti.UI.SIZE or Ti.UI.FILL as the width of the yellow labels.

I'm using that RegExp to remove new line characters and stop them interfering with the design.

If I use a fixed width like 185 to the yellow labels, the rows will look like this: Another screenshot

If I remove the top 10, the undeclared bottom 10 disappear too, but only in the multiline label rows: screenshot (I also added 10 left points for the yellow label). On single line rows it seems the 10 points are still there from the cyan label.

If I add 10 top and 10 bottom to that yellow label: Screenshot.

Does anybody have an idea why does the 10 points at the top add 10 at the bottom too? Why can't I use Ti.UI.SIZE width on the yellow labels?

The whole purpose of these questions is that I need a table view row with those two types of labels inside and I need 10 points at the top and bottom to make the content more readable. And also some distance in between. Also it is preferable that the elements should be width agnostic.

Thanks!

1 Answer

width: Ti.UI.SIZE is correct for the label. I would consider this a bug in the new layout engine.

Your Answer

Think you can help? Login to answer this question!