Titanium “label.width” works for iOS but not for Android

Question

I am developing an app in titanium, and completed the iOS version successfully. Android is presenting some problems, here is one.

The view contains a number of labels to display data in the format A: B (note that B is bold). That bold part is necessary, and the reason I need two labels.

This is the code I am using:

if(restaurant && !(restaurant=='no' && restaurant.length=='2')){
    var restaurant_label = Ti.UI.createLabel({
        text:'Restaurant:',
        left:3,
        height:20,
        width:'auto',
        top:0,
        textAlign:'left',
        color:'#000',
        font:{
            fontFamily:'Helvetica Neue',
            fontSize:13,
            fontWeight:'Regular'
        }
    });
    view.add(restaurant_label);
    var restaurant_value = Ti.UI.createLabel({
        text:restaurant,
        left:restaurant_label.width+10,
        height:'auto',
        width:'auto',
        top:-18,
        textAlign:'left',
        color:'#000',
        font:{
            fontFamily:'Helvetica Neue',
            fontSize:13,
            fontWeight:'Bold',
            fontStyle:'Italic'
        }
    });
    view.add(restaurant_value);
    check_localservices = false;
}

The "value" label needs to be in the right spot, but android does not seem to be able to get the width of the previously added label.

What gives?

Answer 1

It appears in a bug report that there was some question as to what it suppose to be reported by a label.width query. According to the bug report for version 1.7, a correct response to YOUR query should return 'auto' on Android. This is the case because you have 'auto' as the value for width. Does it return 'auto'?

https://jira.appcelerator.org/browse/TIMOB-3202

It so happens that it looks like the correct code is listed there to get the value you are looking for. I haven't tested this, but it appears you might be querying the wrong value.

For your situation it appears you want to use:

var restaurant_value = Ti.UI.createLabel({
        text:restaurant,
        left:restaurant_label.size.width+10, // <===== size
        height:'auto',
        width:'auto',
        top:-18,
        textAlign:'left',
        color:'#000',
        font:{
            fontFamily:'Helvetica Neue',
            fontSize:13,
            fontWeight:'Bold',
            fontStyle:'Italic'
        }
    });

According to the comments, you might need to also query the size property after 'opening' the window. If you look at Paul Dowsett's answer, he has an example of a listener on the 'open' event.