Titanium Community Questions & Answer Archive

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

Multi-Line Text/Text wrap/Line Breaks in Buttons and Table View Items

I am trying to get some text to wrap in both a button and a table view item but can't get it to do anything other than show an ellipsis. I've seen some examples in the Kitchen Sink that use labels - is that what I have to do?

— asked April 8th 2010 by Craig Anderson
  • iphone
0 Comments

6 Answers

  • Craig

    In answer to your question, yes I believe you do have to use a label to achieve your intended result. Personally, I would do it like this, using KS button.js as a starting point (it has been tested and it works):

    var b3 = Titanium.UI.createButton({
        backgroundImage:'../images/BUTT_grn_off.png',
        backgroundSelectedImage:'../images/BUTT_grn_on.png',
        backgroundDisabledImage: '../images/BUTT_drk_off.png',
        color:'#fff',
        top:60,
        height:100,
        width:100
    });
    
    var buttonLabel = Titanium.UI.createLabel({
        color:'#f00',
        font:{fontSize:20,fontWeight:'bold',fontFamily:'Helvetica Neue'},
        highlightedColor:'#0f0',
        text:'Custom Label',
        textAlign:'center',
        touchEnabled:false,
        top:b3.top,
        height:b3.height,
        width:b3.width
    });
    win.add(b3);
    win.add(buttonLabel);
    
    var state = 0;
    b3.addEventListener('click', function(e){
        switch (state)
        {
            case 0:
            {
                e.source.enabled=false;
                buttonLabel.text = 'I am Disabled';
                state++;
    
                setTimeout(function(){
                    e.source.enabled=true;
                    buttonLabel.text = 'I am Enabled';
                    },3000);
                break;
            }
            case 1:
            {
                buttonLabel.font = {
                        fontSize:22,
                        fontFamily:'Marker Felt',
                        fontWeight:'bold'
                };
                buttonLabel.title = 'I am red';
                e.source.backgroundImage='../images/BUTT_red_off.png';
                e.source.backgroundSelectedImage='../images/BUTT_red_on.png';
                buttonLabel.color = '#222';
                state++;
                break;
            }
            case 2:
            {
                buttonLabel.color = '#fff';
                buttonLabel.text = 'White text';
                state=0;
                break;
            }
        }
    });
    

    The full script is here, so you can just replace your current KS button.js script with it.

    — answered November 11th 2010 by Paul Dowsett
    permalink
    1 Comment
    • I've had second thoughts on my suggestion code above. Inline with Don's workaround advice here, I would create a view and add both the label and the button to it. Use the view's / label's default width and height (expands to fit parent) to your advantage to enable you to set dimensions only once, and thus produce the smallest amount of code.

      — commented November 13th 2010 by Paul Dowsett
  • Bummer that this was posted 7 months ago and nobody responded because I have the exact same question now. It wraps fine on the android platform but not the iPhone so I have created a label on top of the iPhone button which then I had to change the text color so that it would match the other buttons. Seems pretty brute force so please respond if there is a better way.

    — answered October 19th 2010 by Wendy
    permalink
    2 Comments
    • Can someone post some code that is not working? Then maybe we can get a solution that will benefit everyone

      — commented November 9th 2010 by Aaron Saunders
    • @Aaron - A screenshot of the button thing can be found in this JIRA ticket. The easy way to see the text not wrap in a button is to make a button, set its width to something, and give it a title that's results in text longer than the button's width. On iOS, the text will shorten like in the right side of the screenshot I linked. The desired behavior, here, is the Android's text wrapping (on the left side of the screenshot).

      — commented October 11th 2011 by Shauna Gordon
  • I absolutely agree - there has to be a better way. 185 views and no solutions? Perhaps an admin can help?

    — answered October 19th 2010 by Craig Anderson
    permalink
    0 Comments
  • @Wendy - Me too…

    Really need a solution asap. Currently I have to use two labels…

    — answered November 8th 2010 by Glen McPherson
    permalink
    1 Comment
    • Can someone post some code that is not working? Then maybe we can get a solution that will benefit everyone

      — commented November 9th 2010 by Aaron Saunders
  • I've checked Lighthouse, and there is currently nothing that mentions problems with button text wrapping. Having said that, there is an open ticket for label wrapping on iOS, so it's strange that you can use a label as a workaround.

    I would suggest, if you are certain that this problem exists and is not caused by a conflict in your code (it doesn't sound like it, to be fair), then modify button.js of the KitchenSink to make it demonstrate your issue, and paste it into a new ticket on Lighthouse. Also, a screenshot would be helpful, uploaded to somewhere like imageshack, also included in the ticket.

    Lastly, paste the link to the ticket here, so that others can find it in future.

    Hope this is helpful

    Hal

    — answered November 9th 2010 by Paul Dowsett
    permalink
    2 Comments
    • The closest I've found so far is this parity issue ticket, which seems to suggest that the text wrapping on Android is actually not the intended behavior, but the truncating is.

      — commented October 11th 2011 by Shauna Gordon
    • i have a pullRequest that correct the behavior on iOs
      https://github.com/appcelerator/titanium_mobile/pull/2618

      — commented July 24th 2012 by Martin Guillon
  • I don't know if anybody ever posted this to Lighthouse or followed it up but this is still an issue. Paul's solution of adding a label on top of the button is all very nice but it requires that event listeners are then added to the label and not the button.

    Also, the need to then write code to assign the correct text colour and make it bold for iOS really does make this a very heavy-handed and cumbersome approach when it would seem to be much simpler to add a text_wrap boolean property to the Titanium.UI.Button and change your compilers to do what's necessary to create the correct Objective-C/java objects at build time.

    Any chance of this being picked up?

    There seem to be far too many examples of us having to "bodge" workarounds when building apps with Titanium Mobile and I find myself wondering how much unnecessary code is being produced by the compilers…

    — answered August 17th 2011 by Robert Turrall
    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.