Titanium Mobile
  1. Titanium Mobile
  2. TIMOB-11594

MobileWeb: TableView rowHeight does not get automatically calculated

    Details

      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.

        Activity

        Hide
        Davide Cassenti added a comment - - edited

        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. 
        
        Show
        Davide Cassenti added a comment - - edited 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.
        Hide
        Davide Cassenti added a comment -

        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.

        Show
        Davide Cassenti added a comment - 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.
        Hide
        Bryan Hughes (Inactive) added a comment -

        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.

        Show
        Bryan Hughes (Inactive) added a comment - 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.
        Hide
        Davide Cassenti added a comment -

        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).

        Show
        Davide Cassenti added a comment - 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).
        Hide
        Davide Cassenti added a comment - - edited

        Result of the code with rowHeight set to Ti.UI.SIZE attached

        Show
        Davide Cassenti added a comment - - edited Result of the code with rowHeight set to Ti.UI.SIZE attached
        Hide
        Davide Cassenti added a comment - - edited

        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

        Show
        Davide Cassenti added a comment - - edited 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
        Hide
        Bryan Hughes (Inactive) added a comment -

        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.

        Show
        Bryan Hughes (Inactive) added a comment - 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.
        Show
        Bryan Hughes (Inactive) added a comment - Pull Requests: https://github.com/appcelerator/titanium_mobile/pull/3456 https://github.com/appcelerator/titanium_mobile/pull/3457
        Hide
        Olga Romero added a comment -

        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

        Show
        Olga Romero added a comment - 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

          People

          • Assignee:
            Bryan Hughes (Inactive)
            Reporter:
            Davide Cassenti
          • Watchers:
            5 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development