Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Is there a way to make label/textField text auto size to to it's width?

Title says it all, but to be clear…

I want to take a label and have the text be sized based on how wide the label is in order to make text fit within any size label.

Is there a way to do this?

— asked June 22nd 2010 by Alexander Stone
  • font
  • size
  • text
0 Comments

3 Answers

  • Yes in the meantime you can I guess…
    set the width of the label field and set a fontSize. And than if you use 'minimumFontSize'-property in the 'createLabel()', it will scale to fit, untill down to the 'minimum' you set, like this:

    var labelWithMinFont = Titanium.UI.createLabel({
                minimumFontSize: 8,
                textAlign:'left',
                text: 'This is a very long text it shouldnt span accross multiline ohyeah i am crazyyyyyyyyyyyyyy',
                font: {fontSize:21,fontFamily:'Helvetica',fontWeight:'bold'},
                left: 5,
                right: 5,
                top: 5,
                bottom:5,
                height: 'auto'        
            });
    
    — answered March 30th 2012 by Roeland P
    permalink
    1 Comment
    • This is the correct solution. Just set width to 'auto' and set a minimumFontSize. It worked for me.

      — commented November 6th 2014 by Xiang Ji
  • I done the same,

    But after using minimumFontSize the label is not showing in multiple line..

    and if i removed that then it shows in multiple line but i want minimumFontSize with multiple line…

    please help me

    — answered July 26th 2012 by Chetan Jadhav
    permalink
    0 Comments
  • If you test that code out, you'll notice that the label is actually very tall. The label renders itself as if it didn't have minimum font size applied, and forces several line breaks as a result. Those line breaks don't remove themselves when the minimumFontSize kicks in. So if you're hoping to position this label, you'll want to wrap it inside of a view to keep it from doing that.

    take a look at the example below.

    var labelWrapper = Titanium.UI.createView({
        height: 40,
        width: 200 //width is handled here to make up for 'auto' on label
    });
    win.add(labelWrapper);
    var label = Titanium.UI.createLabel({
        minimumFontSize: 8,
        width: 'auto', //means it won't try to multiline on you
        text: 'Wait for it...',
        font: {fontSize:21,fontFamily:'Helvetica',fontWeight:'bold'},
    
        backgroundColor: 'silver'    
    });
    labelWrapper.add(label);
    
    
    //showing it in action
    var testing = "This is a long sentance for testing minimum font size".split(" "); 
    
    setInterval(function(){
        label.text += " " + testing.shift();
    }, 1000);
    

    I'm doing some other funky stuff at the bottom showing the box resize itself, but this should help people who are pulling out their hair trying to get their minimumFontSized labels positioned.

    — answered April 12th 2012 by Digital Surgeons
    permalink
    1 Comment
    • funny. just as i posted this i tried setting a left and right instead of wrapping it. here's what i came up with.

      var label = Titanium.UI.createLabel({
          minimumFontSize: 8,
          left: 50, right: 50,
          width: 'auto', //means it won't try to multiline on you
          height: 20,
          text: 'Wait for it...',
          font: {fontSize:21,fontFamily:'Helvetica',fontWeight:'bold'},
      
          backgroundColor: 'silver'    
      });
      win.add(label);
      
      var testing = "This is a long sentance for testing minimum font size".split(" "); 
      
      setInterval(function(){
          label.text += " " + testing.shift();
      }, 1000);
      

      so the left and right values become the padding, so rather than being able to read that this label is going to be a maximum of 220 pixels, we have to do some math (320 - 50 - 50)

      i guess either way will do.

      — commented April 12th 2012 by Digital Surgeons
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.