Turning off iOS wordwrap in Titanium

Titanium Mobile 2.1 allows you to display read-only text using the Label class. This has a property called wordWrap that, when you set it to false, will stop the text from wrapping to a line below it. Pretty crucial for a screen with limited space you would have thought. The only problem is that it doesn’t seem to work with iPad/iPhone as I found when trying to port an app I’d initially developed for Android.

The only workaround I can find at present is to use the minimumFontSize property. If you use this iOS will automatically scale the font size downwards until the text fits the width of the label or it reaches your specified minimum size. If it can’t fit it in then instead of wrapping it chops it off with ellipses. This looks rubbish though, and for some reason shifts the whole text downwards by a few pixels too. However if you set the minimum font size to the same as the required font and also set the height to something only slightly larger than the required font size then it will behave itself. Note setting height to Ti.UI.SIZE does not work.

I couldn’t find anything obvious on the Web about this (other than people moaning about it), so I thought I’d post how I’d got around it.

  var rel = Titanium.UI.createLabel({
        text : "some very long text that won't fit in the label on one line",
        font : {
            fontSize : 16,
            fontWeight : 'bold'
        minimumFontSize: 16,  // do this for word wrap for iPad/iPhone ...
        height : 20,          // ... and you need to hardcode a height too!
        width: Ti.UI.FILL,    

        wordWrap : false      // for Android

Bug/feature in jQuery tablesorter pager

I’ve just come across a feature/bugette of the otherwise excellent jQuery tablesorter.pager plugin which is worth making a note of:

If your table has no rows and you try to make the call to the plugin then it appears to throw a wobbly and possibly an exception too. If you are doing this within an ‘OnSuccess’ event from an MVC Ajax.BeginForm() call then it appears to cancel out of the call and possibly messes up your screen too, depending on what else you are doing in this call.

To get around it I simply returned a different PartialView that didn’t contain the table, and then in the OnSuccess event checked to see if the table existed:


if ($("#tblSearchResults").length > 0) {
        $("#tblSearchResults").tablesorterPager({ container: $("#pager") });

Another way might be to tag individual rows with a class name, and see if any instances of that class exist on the page. The above way suited me better this time.