CODEWITHSUNDEEP
appceleratortitanium-mobile
ben721sg
ben721sg

Reputation: 33

Titanium: Creating a view with dynamic height

I ran into some problems when trying to create a view with a dynamic height.

"post_comment" is my label where text will be displayed. The length of text has to be dynamic, and the "containComment" view will have to adjust its height to be able to display this label. 

var post_comment = Titanium.UI.createLabel({
        color:'#000',
        text:L(randomText),
        top:10,
        bottom:30,
        left:4,
        width:220,
        height:'auto',
        font: { fontSize:11 },
    });

    var comment_height = 100;

    post_comment.addEventListener('postlayout', function(e) {
        comment_height = e.source.rect.height;
        alert(comment_height); <--------- 1
    });

    var containComment = Titanium.UI.createView({
        layout :'horizontal',
        contentWidth:'100%',
        height: comment_height,
    });
    alert(comment_height);  <-------- 2

I used postlayout to get the height but for some reason I cannot get the same value outside to the function.

I tested the "comment_height" at the 2 locations indicated by the arrows. In 1, the height is shown to be correct. But at 2, the height is always the default value of 100. I was thinking that it was due to "comment_height" not being global so i sent it to the head of the script but it still does not fix the issue.

Any help would be appreciated.

Upvotes: 2

Views: 6232

Answers (1)

Martyn Joyce
Martyn Joyce

Reputation: 627

This is most straightforward by just letting the views auto-size. If you see this code, it does what you want:

var win = Titanium.UI.createWindow({  
    backgroundColor:'white'
});

var post_comment = Titanium.UI.createLabel({
    color:      'white',
    top:        10,
    bottom:     30,
    left:       4,
    width:      220,
    height:     Ti.UI.SIZE,
    font:       { fontSize:11 },
    backgroundColor: 'blue',
    text:       "My Text"
});


var containComment = Titanium.UI.createView({
    height: Ti.UI.SIZE,
    backgroundColor: 'red'
});


containComment.add(post_comment);

win.add(containComment);

win.open();

However, you cannot read the height value from the view when it is done like this. I.e containComment.height will not give you a value.

If you really need the number value of the height the only way I know of is to convert it to an image and then read the size of the image:

var containImage = containComment.toImage();

// height = containImage.height

Hope that helps

Upvotes: 6

Related Questions