Titanium Community Questions & Answer Archive

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

Label Text won't wrap

Greetings,

I'm trying to get some text inside a label to wrap.

Here is my code:

var win=Titanium.UI.currentWindow;

var class_textfield={
    color:'#336699',
    width:250,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
};
var class_label={
    color:'#333',
    font:{fontSize:20,fontFamily:'Helvetica Neue'}
};

var scrollView=Titanium.UI.createScrollView({
    top:0,
    right:0,
    left:0,
    showVerticalScrollIndicator:true
});
win.add(scrollView);


var titleBar=Titanium.UI.createView({
    backgroundColor:'#333',
    top:0,
    left:0,
    right:0,
    height:64
});
scrollView.add(titleBar);

var back=Titanium.UI.createButton({
    title:'Back',
    top:10,
    left:10
});
titleBar.add(back);
back.addEventListener('click',function(e){
    win.close();
});





var label1=Titanium.UI.createLabel(class_label);
label1.top=80;
label1.left=10;
label1.right=10;
//label1.width=Titanium.Platform.displayCaps.platformWidth;
label1.textAlign='left';
label1.text='To sign-up, simply fill in your details below:';
scrollView.add(label1);

And here is the result:

http://i52.tinypic.com/1zck8y9.png

I'm really stuck here and I'd very much appreciate any insight.

Many thanks in advance,

Edit
Code modified on request from Hal to better explain what's going on before 'label1' is declared.

— asked November 12th 2010 by Eamonn Hynes
  • align
  • label
  • text
  • wrapping
2 Comments
  • I've just edited the post to remove an accidental extra scrollview declaration.

    — commented November 14th 2010 by Eamonn Hynes
  • I've just edited the post to remove an accidental extra scrollview declaration.

    — commented November 14th 2010 by Eamonn Hynes

4 Answers

  • Eamonn

    I cannot stress enough how important it is that you and, to be fair, quite a few others, post code that runs. By leaving parts out, even that which appears trivial, you change the parameters and thus the helper is much less likely to be able to recreate your issue. Also, without it, your problem is consumes a lot more of the helper's time (to get the script running), that could be spent helping others.

    In short, if you would like quick and reliable answers, you will provide all of the information in the original post.

    With this in mind, you have only provided part of your code. Where is the window creation, and class_label?

    What is your platform and SDK version?

    Your code (with some unavoidable alterations to make it run) works fine on android 1.4.X (12 Nov):

    var win = Ti.UI.createWindow({
        title:'Window 1',
        backgroundColor:'#0f0'
    });
    
    var scrollView=Titanium.UI.createScrollView({
        contentHeight:'auto',
        contentWidth:'auto',
        backgroundColor:'#CECFCE'
    });
    win.add(scrollView);
    
    var label1=Titanium.UI.createLabel();
    label1.color = '#000';
    label1.top=80;
    label1.left=10;
    label1.right=10;
    label1.text='To sign-up, simply fill in your details below and lots more text in this sentence besides:';
    scrollView.add(label1);
    
    win.open();
    

    See screenshot

    Which leads me to suspect one of the following causes:

    1. there is something in your code that you are not telling us
    2. if you are developing for the iphone, there is a disparity in behaviour between android and iphone, meaning that more testing is required in order for us to raise it with the devs.
    3. you are using a different SDK to me
    4. something else ;)

    It honestly is too difficult to say, with the information you have provided.

    — answered November 13th 2010 by Paul Dowsett
    permalink
    2 Comments
    • Hi Hal,

      Many thanks for your message. I very much appreciate the free advice you are giving me.

      1. Yes, you're right, I didn't include the full code. Sorry about that. I'll copy and paste the code now and edit the post.

      2. I am developing for the iPhone, but I don't have a Mac/iPhone so am doing everything on an Android emulator for now until a HTC Desire HD that I ordered arrives. I can appreciate that the devs are working very hard to get Appcelerator right.

      3. I'm using Titanium Developer 1.2.1 and Android emulator 2.2 API.

      4. I suspect it might be something to do with an extra "titlebar" view I've put in above the label that's causing the problem. I'm playing around with the width/left/right parameters of that at the moment.

      Again, I really appreciate all your responses and am grateful for the free advice. In future, I'll try to be more precise and put greater care into my posts to ensure that people don't get confused and my posts are more helpful to others.

      Best regards,

      — commented November 13th 2010 by Eamonn Hynes
    • That's OK, Eamonn - it's great that you took my comments constructively and in the good spirit that they were intended.

      I have a very similar environment to you, so I will try your code and report back.

      Cheers

      — commented November 13th 2010 by Paul Dowsett
  • label1.height='auto';
    

    worked for me

    — answered November 12th 2010 by Aaron Saunders
    permalink
    4 Comments
    • Hey, I just tried that. Unfortunately the text is still running off the right of the screen…

      — commented November 12th 2010 by Eamonn Hynes
    • Try setting a width.

      — commented November 12th 2010 by Xiao Jin
    • There is a good chance that Eamonn is intending to create views that will appear centred regardless of orientation. Setting the width would prevent this.

      — commented November 13th 2010 by Paul Dowsett
    • Setting a width appears to work. But is there no way to make the text auto wrap based on screen width?

      — commented November 13th 2010 by Eamonn Hynes
  • Eamonn

    Note that you have a syntax error in your code. titleBar.width should not have a trailing comma. This won't make a difference to your problem in this case, of course, but in others it might.

    I'd recommend an IDE with a js validator, such as eclipse, as it can speed up your dev process.

    • Where is createWindow()?
    • Why do you have scrollView defined twice?
    • Where do you open the window?

    The best approach is to have a clean project that you use solely to check your scripts work before posting them here. Simply replace the app.js contents.

    — answered November 13th 2010 by Paul Dowsett
    permalink
    2 Comments
    • Have you provided the titanium SDK version that you are using with the app?

      — commented November 13th 2010 by Paul Dowsett
    • Hi, I'm using SDK version 1.2.1.

      I managed to resolve this text wrapping issue by specifying the width of the scrollview to

      var scrollView=Titanium.UI.createScrollView({
          contentWidth:Titanium.Platform.displayCaps.platformWidth,
          contentHeight:'auto',
          top:0,
          showVerticalScrollIndicator:true,
          showVerticalScrollIndicator:true
      });
      win.add(scrollView);
      

      I tried setting it to 'auto', but this doesn't work.

      Many thanks for your help,

      — commented November 14th 2010 by Eamonn Hynes
  • I tried MANY of the recommended approaches to wrapping dynamic text automatically in a non-editable textView, but none work. It seems to me that a native "wrapText" should exist. I tried TextWrap, horizontal layouts, and more, but unless I am tired and grumpy, a simple resolution does not exist. I am shocked that I need to write a more involved solution to a fundamental function.

    — answered September 22nd 2013 by Lyndon Castro
    permalink
    0 Comments
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.