Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10001] iOS: Adding multi-line label with width: Ti.UI.FILL and height: Ti.UI.SIZE to tableviewrow results in incorrect layout and use of "..."

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-07-20T16:14:17.000+0000
Affected Version/sRelease 2.0.1
Fix Version/sSprint 2012-15 Core, Release 3.0.0
ComponentsiOS
Labelscore, qe-port
ReporterJeroen van Vianen
AssigneeMax Stepanov
Created2012-05-06T15:02:16.000+0000
Updated2012-10-09T16:17:28.000+0000

Description

See attached app.js. I have a couple of labels that span multiple lines of text which should be added to a tableviewrow. Depending on the label length sometimes "..." are added to the end and the last part of the text is not shown as expected. In my example: the first row is missing "sit" which should be on a new line, the second row is missing the entire line "Last line", the third row is correct. I assume it has something to do with me specifying left, right, top and bottom on the label to correctly place it inside the tableviewrow. If I remove those layout properties all labels won't show "...", but it looks of course ugly ;-)

Attachments

FileDateSize
app_5_1_1.js2012-05-18T14:48:20.000+00003021
app.js2012-05-06T15:02:16.000+00001713
incorrect_multiline_label_in_tableviewrow.png2012-05-06T15:02:16.000+0000133504
screenshot_511_landscape.png2012-05-18T14:48:20.000+0000110368
screenshot_511_portrait.png2012-05-18T14:48:20.000+0000121639

Comments

  1. Jeroen van Vianen 2012-05-07

    I was able to work around this issue by setting the TableViewRow's layout to 'vertical' and adding a postlayout event listener on every label to update the height of its containing TableViewRow: 
       var postLayout = function(event) {
       label.removeEventListener("postlayout", postLayout);
       row.height = label.rect.height + 20; /* label.top + label.bottom */
   };
   
   label.addEventListener("postlayout", postLayout);
    This is of course a very tedious solution...
  2. Jeroen van Vianen 2012-05-15

    I upgraded to iOS 5.1.1 and now the postlayout event is no longer fired. Specifying SDK 5.0 or 5.1 doesn't make a difference. I reverted back to row and label height: 'auto' and everything works again as expected.
  3. Jeroen van Vianen 2012-05-18

    I worked on this issue some more. It's very frustrating on an iOS 5.1.1 device, but I managed to get it working with the following set-up: * TableViewRow has layout 'vertical' * TableViewRow has child View with top and bottom specified * View has child Label with left and right specified * label has a postlayout event listener that updates the height of the row based upon the height of the view containing the label. Note that it doesn't work: * If the TableViewRow does not have layout 'vertical' * if View or Label has all four positions set; only carefully setting top and bottom on the View and left and right on the Label (and not vice versa!) * When adding a postlayout eventlistener on the view or row results in an endless loop. As far as I'm concerned this is *a lot of work* for just a multi-line TableViewRow... Additionally, I noticed that the postlayout event is *not* fired on orientationchange and I would consider that a serious bug.
  4. Jeroen van Vianen 2012-05-18

    Here is my updated app.js for iOS 5.1.1 and two screenshots which show it works for portait, but not for landscape mode. The postlayout event is not fired on orientationchange. Therefore the row's height is still the one set in the portrait postlayout event.
  5. Max Stepanov 2012-07-19

    PR pending https://github.com/appcelerator/titanium_mobile/pull/2611
  6. Olga Romero 2012-08-14

    Verified fix with: Titanium Studio, build: 2.1.1.201207271312 Titanium SDK: 2.2.0.v20120813184911 Devices: iPhone 4s 5.0.1 iPad1 5.1.1 Simulator 5.1 Note: works as shown on a screenshot_511.png

JSON Source