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?
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.
-
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.
-
I absolutely agree - there has to be a better way. 185 views and no solutions? Perhaps an admin can help?
-
@Wendy - Me too…
Really need a solution asap. Currently I have to use two labels…
-
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
-
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…