Auto resize label after change its text

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

I need to create a label with a default text, example:

var myLabel = Ti.UI.createLabel({
    text: "some text",
    height: 'auto',
    width: 'auto'
});
And then when I need to change the text like
myLabel.setText("some bigger text here");
I need the label to be resized (width and height) to display the entire text, but I cant get to do that. Also creating another label to replace the existing one would not be good because its inside a tableView so I would have to delete all rows and append again.

4 Answers

Accepted Answer

Heres the working code. You need to set the height and width on the row too.

var win = Ti.UI.createWindow({
    width: '100%',
    height: '100%'
});
 
var tableview = Ti.UI.createTableView({ 
    width: '100%',
    height: '100%'
});
 
var row = Ti.UI.createTableViewRow({
});
 
var label = Ti.UI.createLabel({
    text: "some text",
    backgroundColor: 'gray',
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE
});
 
row.add(label);
tableview.appendRow(row);
win.add(tableview);
 
function randomString(bottom, top)
{
    if (bottom >= top)
        return null;
 
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvxwyz0123456789";
    var len = Math.floor(Math.random() * (top - bottom)) + bottom;
 
    for( var i=0; i < len; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));
 
    return text;
}
 
function changeText() 
{
    label.text = randomString(10,40)
    label.width = 100;
    label.height = 50;
    row.width = 100;
    row.height = 50;
 
}
 
setInterval(changeText, 1000);
 
win.open();

— answered 10 months ago by Birender Saini
answer permalink
6 Comments
  • Hi Birender! Thanks for your response but I cant fix a size (height) on the label and row because the lenght of the string could vary more than 40 characters (it comes from a local database). I think I could make a calculation to set the height based on the numbers of characters (fixed width) although I would prefer that the label resizes automatically.

    — commented 10 months ago by David Benko

  • Sure, here you go. You can fix the width and just keep the height as 'auto' too

    var win = Ti.UI.createWindow({
        width: '100%',
        height: '100%'
    });
     
    var tableview = Ti.UI.createTableView({ 
        width: '100%',
        height: '100%'
    });
     
    var row = Ti.UI.createTableViewRow({
    });
     
    var label = Ti.UI.createLabel({
        text: "some text",
        backgroundColor: 'gray',
        height: Ti.UI.SIZE,
        width: Ti.UI.SIZE
    });
     
    row.add(label);
    tableview.appendRow(row);
    win.add(tableview);
     
    function randomString(bottom, top)
    {
        if (bottom >= top)
            return null;
     
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvxwyz0123456789";
        var len = Math.floor(Math.random() * (top - bottom)) + bottom;
     
        for( var i=0; i < len; i++ )
            text += possible.charAt(Math.floor(Math.random() * possible.length));
     
        return text;
    }
     
    function changeText() 
    {
        label.text = randomString(10,40)
        label.width = 'auto';
        label.height = 'auto';
        row.width = 'auto';
        row.height = 'auto';
     
    }
     
    setInterval(changeText, 1000);
     
    win.open();

    — commented 10 months ago by Birender Saini

  • Thank you! I can't test this right now but I will try tomorrow and give you the feedback.

    — commented 10 months ago by David Benko

  • Show 3 more comments

Have you tried using Ti.UI.SIZE for the width and height parameters?

— answered 10 months ago by Nikhil Nigade
answer permalink
4 Comments
  • Yes I did, the label keeps its original size after changing the text.

    — commented 10 months ago by David Benko

  • I just tried it. Working on my end. Even when the label does not have enough horizontal space, the text flows onto the next line. Perhaps, something in your code?

    — commented 10 months ago by Nikhil Nigade

  • BTW, I tested this on iOS 5.1 and Ti SDK 2.1.2. Since you haven't mentioned your TiSDK or your platform, it might get tricky for me to help you.

    — commented 10 months ago by Nikhil Nigade

  • Show 1 more comment

So lets say you are changing the text of the label on some event, then when you change the text, you can also adjust the height and width at the same time.

If the new text is known in advance, you can have fixed values for the width and height, else you can come up with a small formula depending on the number of characters in your message.

Here is the example I'm working on

var win = Ti.UI.createWindow({
    width: '100%',
    height: '100%'
});
 
var tableview = Ti.UI.createTableView({ 
    width: '100%',
    height: '100%'
});
 
var row = Ti.UI.createTableViewRow({
});
 
var label = Ti.UI.createLabel({
    text: "some text",
    backgroundColor: 'gray',
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE
});
 
row.add(label);
tableview.appendRow(row);
win.add(tableview);
 
function randomString(bottom, top)
{
    if (bottom >= top)
        return null;
 
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvxwyz0123456789";
    var len = Math.floor(Math.random() * (top - bottom)) + bottom;
 
    for( var i=0; i < len; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));
 
    return text;
}
 
function changeText() 
{
    label.text = randomString(10,40)
}
 
setInterval(changeText, 1000);
 
win.open();

Your Answer

Think you can help? Login to answer this question!