Titanium Community Questions & Answer Archive

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

Titanium.UI.Label text cropped

I'm using a Titanium.UI.Label to render text in my application but on some lines the text is cropped on right as it can be seen on the following image :

Application Cropped text

How can I render it properly?

— asked September 30th 2010 by Guillaume L.
  • android
  • mobile
0 Comments

3 Answers

  • Hey guys (and whoever is reading).

    I was having a related problem in a tableViewRow where I had two label fields dynamically positioned - one on the left, one on the right. The rightmost field wordwrapped correctly when it hit the edge of the window, but the leftmost field failed to wrap causing it to extend into the space of the rightmost field (with the text mixing up).

    Even though (with wordWrap set to true) I set the width property to the leftmost textfield to way before the start of the rightmost field, I noticed that the text will continue to extend so long as it doesn't exceed the width of the parent view.

    The solution I found was to place my problem child label inside a container view with a specified width (keeping the wordWrap property of the now child label to true) and the field will wrap when the text hits the width of the parent view.

    — answered March 7th 2012 by Jason Sultana
    permalink
    1 Comment
    • >The solution I found was to place my problem child label inside a container view with a specified width (keeping the wordWrap property of the now child label to true) and the field will wrap when the text hits the width of the parent view.

      Seems to be the only way to get word wrapping to work inside table rows.

      — commented August 2nd 2012 by Jeff Antram
  • It appears that a label will word wrap by default, if height is set to 'auto' or to a value large enough so the wrapped text fits, unless you have set a minimumFontSize property. If that's set, you only get smaller text with an ellipse, no matter what the height setting is. Ideally, text in a label should wrap within the width and height values, and then scale down to the specified minimumFontSize as needed to keep all the wrapped text within the specified width and height, but I can't get this to work, e.g.,

    this wraps just great:

    var text = Ti.UI.createLabel
    ({
        text:'Lorem ipsum blah blah foo foo more more more more etc etc etc',
        color:'yellow',
        font:{fontSize:20, fontFamily:"Courier"},
        width:290,
        height:'auto',
        top:10
    });
    

    this will not wrap, but the font size will shrink to fit the text horizontally:

    var text = Ti.UI.createLabel
    ({
        text:'Lorem ipsum blah blah foo foo more more more more etc etc etc',
        color:'yellow',
        font:{fontSize:20, fontFamily:"Courier"},
        minimumFontSize:10,
        width:290,
        height:'auto',
        top:10
    });
    
    — answered September 30th 2010 by karlo kilayko
    permalink
    3 Comments
    • You cannot set minimum font size and expect multi-lines. Per the documentation , minimum font size: the minimum size of the font when the font is sized based on the contents. Enables font scaling to fit and forces the label content to be limited to a single line.

      Also, this question doesn't have to with wrapping or font size, it's about Titanium not deciding the right spot to wrap. You can see in the image above it is cutting off parts of words rather than wrapping. Some lines it gets right, some it does not. This effect seems to be worse within tableview rows.

      — commented October 1st 2010 by Mike Robinson
    • So… there's no way to solve this? Any work around, even if I must replace Titanium.UI.Label and/or Titanium.UI.TableView?

      — commented October 2nd 2010 by Guillaume L.
    • I don't know of any explicit work around (other than inserting your own '\n' where you would like the line breaks to be). You can try different things and report back.

      I would also recommend creating a lighthouse ticket, being as this problem isn't just you….and there's no great work around.

      — commented October 4th 2010 by Mike Robinson
  • You might try a nightly build which added a wordWrap and other property to work around this.

    — answered September 30th 2010 by Andrew Heebner
    permalink
    2 Comments
    • I kind of doubt the wordWrap functionality will make a difference, as the checkin says that is what is already being done by default (see here). Rather the option was to simply disable the wrap. I have experienced similar issues to this poster with no real solution.

      — commented September 30th 2010 by Mike Robinson
    • The effect seems to be worse when placed in a tableview row, especially w/ auto height.

      — commented September 30th 2010 by Mike Robinson
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.