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 :
How can I render it properly?
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.
-
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 });
-
You might try a nightly build which added a wordWrap and other property to work around this.