Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-11594] MobileWeb: TableView rowHeight does not get automatically calculated

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-11-21T23:18:15.000+0000
Affected Version/sn/a
Fix Version/sRelease 3.0.0, Release 3.1.0, 2012 Sprint 24, 2012 Sprint 24 JS
ComponentsMobileWeb
Labelsqe-mobileweb, qe-port
ReporterDavide Cassenti
AssigneeBryan Hughes
Created2012-10-29T15:00:12.000+0000
Updated2014-06-19T12:42:53.000+0000

Description

Problem description

Steps to reproduce

- Use the following code: 
var win1 = Titanium.UI.createWindow({
    navBarHidden : false,
    title : 'Test Window',
    backgroundColor : 'white',
    left : 0,
    top : 0
});

var tableView = Titanium.UI.createTableView({
    className : "session.row.class"
});

var rows = [];

for (var d = 0; d < 20; d++) {
    var row = Ti.UI.createTableViewRow({
        hasChild : true
    });

    var name_label = Ti.UI.createLabel({
        text : "<b>Test title</b><br/>Testing<br/><i>This is just a label with some text</i>",
        top : 5,
        left : 5,
        width : 300,
        color : "black"
    });

    row.add(name_label);

    rows.push(row);
}

tableView.setData(rows);
win1.add(tableView);

win1.open();
- run the code: the label is clipped; - setting the height to 'auto' or Ti.UI.SIZE, both for the label or the row, doesn't fix the problem (label becomes invisible if row.height is Ti.UI.SIZE); - changing rowHeight does not help as well; - label.size.height or row.size.height seem wrong even if they are called after the table is displayed on the screen.

Attachments

FileDateSize
Screen Shot 2012-11-21 at 4.02.36 PM.png2012-11-21T16:03:58.000+000044628

Comments

  1. Davide Cassenti 2012-11-05

    Hello; I have activated the instruments on the app, and logged what happens when moving between the windows. To be more clear, the app that I am testing has 3 windows, each with 2 buttons to move back and forth between them. Inside each window there is a table view: the first time the window is open, everything appears to be correct; moving 'NEXT' works too the first time; when I click 'BACK' from the second window to the first, the elements disappear. Same happens when I click 'NEXT' again, or when I do the same operation between windows 2 and 3. The windows are created in this way: 
       Ti.UI.createWindow({		
   	orientationModes : [Ti.UI.PORTRAIT],
   	backgroundColor : "#FFFFFF",
   	modal : true,
   	exitOnClose : exitOnCloseVal
   });
    The NEXT button opens a second window with a simple win.open(); the BACK button does a win.close() on the currently open window. This is what I see with the instruments (I removed everything that is not 'layout' and added comments about my actions): 
       { OPEN THE APP: WIN1 APPEARS OK }
   
   [INSTRUMENTATION] Test 'Layout 1' completed
   	Duration: 1 ms
   	Time since app launched: 478 ms
   	More Info: 0 out of approximately 0 elements laid out. 127.0.0.1:735
   [INSTRUMENTATION] Test 'Layout 2' completed
   	Duration: 33 ms
   	Time since app launched: 1754 ms
   	More Info: 69 out of approximately 73 elements laid out. 127.0.0.1:735
   [INSTRUMENTATION] Test 'Layout 3' completed
   	Duration: 1 ms
   	Time since app launched: 1803 ms
   	More Info: 4 out of approximately 73 elements laid out. 
   
   { CLICK NEXT: WIN2 APPEARS OK }
   
   [INSTRUMENTATION] Test 'Layout 4' completed
   	Duration: 32 ms
   	Time since app launched: 38191 ms
   	More Info: 82 out of approximately 162 elements laid out. 
   
   { CLICK BACK: WIN2 CLOSES, WIN1 APPEARS WRONG }
   
   [INSTRUMENTATION] Test 'Layout 5' completed
   	Duration: 13 ms
   	Time since app launched: 60199 ms
   	More Info: 56 out of approximately 73 elements laid out. 
   
   { CLICK NEXT: WIN2 APPEARS WRONG }
   
   [INSTRUMENTATION] Test 'Layout 6' completed
   	Duration: 21 ms
   	Time since app launched: 343081 ms
   	More Info: 70 out of approximately 162 elements laid out. 
   
   { CLICK BACK: WIN2 CLOSES, WIN1 APPEARS WRONG }
   
   [INSTRUMENTATION] Test 'Layout 7' completed
   	Duration: 13 ms
   	Time since app launched: 421817 ms
   	More Info: 56 out of approximately 73 elements laid out.
    Another test that shows the same error: open the app and resize the window; also in this case, the content of the window disappear and this is what I see with the instruments: 
       [INSTRUMENTATION] Test 'Layout 4' completed
   	Duration: 9 ms
   	Time since app launched: 10148 ms
   	More Info: 56 out of approximately 73 elements laid out.
  2. Davide Cassenti 2012-11-05

    One more thing I noticed: when the rows are created in the table view, their height is set to Ti.UI.SIZE, such as: 
       var _row = Ti.UI.createTableViewRow({			
   	height : Ti.UI.SIZE,
   	selectionStyle : 'none',
   	touchEnabled : false,
   	selectedColor : 'transparent'
   });
    If I change the height to a fixed size, the problem does not occour.
  3. Bryan Hughes 2012-11-20

    Everything is working correctly. TableView's have a default rowHeight of '50', which is why they are being clipped. Changing the rowHeight property of the table view (not the table view row) to Ti.UI.SIZE works just fine. Here is how I modified your code: 
       var win1 = Ti.UI.createWindow({
       navBarHidden : false,
       title : 'Test Window',
       backgroundColor : 'white',
       left : 0,
       top : 0
   });
    
   var tableView = Ti.UI.createTableView({
       className: 'session.row.class',
   	rowHeight: Ti.UI.SIZE
   });
    
   var rows = [];
    
   for (var d = 0; d < 20; d++) {
       var row = Ti.UI.createTableViewRow({
           hasChild : true
       });
    
       var name_label = Ti.UI.createLabel({
           text : '<b>Test title</b><br/>Testing<br/><i>This is just a label with some text</i>',
           top : 5,
           left : 5,
           width : 300,
           color : 'black'
       });
    
       row.add(name_label);
    
       rows.push(row);
   }
    
   tableView.setData(rows);
   win1.add(tableView);
    
   win1.open();
    BTW, a quick side note: 'auto' is converted to Ti.UI.SIZE under the hood in Mobile Web.
  4. Davide Cassenti 2012-11-21

    Hi Bryan, The code you have posted is exactly the problem I have: if I do set the rowHeight to Ti.UI.SIZE, the height is not properly calculated. Attaching a screenshot of what I see (SDK 2.1.4 or 3.0.0).
  5. Davide Cassenti 2012-11-21

    Result of the code with rowHeight set to Ti.UI.SIZE attached
  6. Davide Cassenti 2012-11-21

    An additional note: I see the same result also if I set the height of each row to Ti.UI.SIZE. Also, I do see these behaviors with different browsers: 1) Firefox 16.0.2: the screenshot is what I see as soon as the app is launched in the browser 2) Chrome 24.0.1312.14 beta: when the app runs, everything is correct; as soon as I resize the window, the rows height changes and I see the same view as in the screenshot attached. 3) Safari behaves as Firefox
  7. Bryan Hughes 2012-11-21

    Gah! It worked fine for me yesterday, briefly, but now I see the same behavior. Of course it would only work properly the one time I tested it...Yeah this is a bug in the core layout mechanism, possibly in the text measuring mechanism since it varies from browser to browser.
  8. Bryan Hughes 2012-11-21

    Pull Requests: https://github.com/appcelerator/titanium_mobile/pull/3456 https://github.com/appcelerator/titanium_mobile/pull/3457
  9. Olga Romero 2012-12-06

    Closing as fixed for TableView row height. Tested and verified with: Titanium Studio, build: 3.0.0.201211301903 Titanium SDK, build 3.0.0.v20121206113203 Titanium SDK, build 3.1.0.v20121206112601 Mountain Lion 10.8.2 iPod 4.3.3 Simulator 6.0 Emulator 2.2

JSON Source