{ "id": "104034", "key": "TIMOB-11594", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [ { "id": "13505", "description": "Release 3.0.0", "name": "Release 3.0.0", "archived": true, "released": true, "releaseDate": "2012-12-14" }, { "id": "14162", "description": "Release 3.1.0", "name": "Release 3.1.0", "archived": true, "released": true, "releaseDate": "2013-04-16" }, { "id": "14624", "description": "2012 Sprint 24 JS", "name": "2012 Sprint 24", "archived": true, "released": true, "releaseDate": "2012-12-03" }, { "id": "14627", "description": "2012 Sprint 24 JS", "name": "2012 Sprint 24 JS", "archived": true, "released": true, "releaseDate": "2012-12-03" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2012-11-21T23:18:15.000+0000", "created": "2012-10-29T15:00:12.000+0000", "priority": { "name": "High", "id": "2" }, "labels": [ "qe-mobileweb", "qe-port" ], "versions": [], "issuelinks": [], "assignee": { "name": "bhughes", "key": "bhughes", "displayName": "Bryan Hughes", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2014-06-19T12:42:53.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "11500", "name": "MobileWeb", "description": "Mobile Web (HTML) Platform" } ], "description": "h2. Problem description\r\n\r\nh2. Steps to reproduce\r\n- Use the following code: \r\n\r\n{code}\r\nvar win1 = Titanium.UI.createWindow({\r\n navBarHidden : false,\r\n title : 'Test Window',\r\n backgroundColor : 'white',\r\n left : 0,\r\n top : 0\r\n});\r\n\r\nvar tableView = Titanium.UI.createTableView({\r\n className : \"session.row.class\"\r\n});\r\n\r\nvar rows = [];\r\n\r\nfor (var d = 0; d < 20; d++) {\r\n var row = Ti.UI.createTableViewRow({\r\n hasChild : true\r\n });\r\n\r\n var name_label = Ti.UI.createLabel({\r\n text : \"Test title
Testing
This is just a label with some text\",\r\n top : 5,\r\n left : 5,\r\n width : 300,\r\n color : \"black\"\r\n });\r\n\r\n row.add(name_label);\r\n\r\n rows.push(row);\r\n}\r\n\r\ntableView.setData(rows);\r\nwin1.add(tableView);\r\n\r\nwin1.open();\r\n{code}\r\n\r\n- run the code: the label is clipped;\r\n- 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);\r\n- changing rowHeight does not help as well;\r\n- label.size.height or row.size.height seem wrong even if they are called after the table is displayed on the screen.\r\n", "attachment": [ { "id": "33620", "filename": "Screen Shot 2012-11-21 at 4.02.36 PM.png", "author": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "created": "2012-11-21T16:03:58.000+0000", "size": 44628, "mimeType": "image/png" } ], "flagged": false, "summary": "MobileWeb: TableView rowHeight does not get automatically calculated", "creator": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "subtasks": [], "reporter": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "environment": "MobileWeb\r\nSDK 2.1.3\r\nSDK 3.0.0\r\nChrome\r\nFirefox", "comment": { "comments": [ { "id": "226115", "author": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "body": "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.\r\n\r\nThe windows are created in this way: \r\n\r\n{code}\r\nTi.UI.createWindow({\t\t\r\n\torientationModes : [Ti.UI.PORTRAIT],\r\n\tbackgroundColor : \"#FFFFFF\",\r\n\tmodal : true,\r\n\texitOnClose : exitOnCloseVal\r\n});\r\n{code}\r\n\r\nThe NEXT button opens a second window with a simple win.open(); the BACK button does a win.close() on the currently open window.\r\n\r\nThis is what I see with the instruments (I removed everything that is not 'layout' and added comments about my actions):\r\n\r\n{code}\r\n{{{ OPEN THE APP: WIN1 APPEARS OK }}}\r\n\r\n[INSTRUMENTATION] Test 'Layout 1' completed\r\n\tDuration: 1 ms\r\n\tTime since app launched: 478 ms\r\n\tMore Info: 0 out of approximately 0 elements laid out. 127.0.0.1:735\r\n[INSTRUMENTATION] Test 'Layout 2' completed\r\n\tDuration: 33 ms\r\n\tTime since app launched: 1754 ms\r\n\tMore Info: 69 out of approximately 73 elements laid out. 127.0.0.1:735\r\n[INSTRUMENTATION] Test 'Layout 3' completed\r\n\tDuration: 1 ms\r\n\tTime since app launched: 1803 ms\r\n\tMore Info: 4 out of approximately 73 elements laid out. \r\n\r\n{{{ CLICK NEXT: WIN2 APPEARS OK }}}\r\n\r\n[INSTRUMENTATION] Test 'Layout 4' completed\r\n\tDuration: 32 ms\r\n\tTime since app launched: 38191 ms\r\n\tMore Info: 82 out of approximately 162 elements laid out. \r\n\r\n{{{ CLICK BACK: WIN2 CLOSES, WIN1 APPEARS WRONG }}}\r\n\r\n[INSTRUMENTATION] Test 'Layout 5' completed\r\n\tDuration: 13 ms\r\n\tTime since app launched: 60199 ms\r\n\tMore Info: 56 out of approximately 73 elements laid out. \r\n\r\n{{{ CLICK NEXT: WIN2 APPEARS WRONG }}}\r\n\r\n[INSTRUMENTATION] Test 'Layout 6' completed\r\n\tDuration: 21 ms\r\n\tTime since app launched: 343081 ms\r\n\tMore Info: 70 out of approximately 162 elements laid out. \r\n\r\n{{{ CLICK BACK: WIN2 CLOSES, WIN1 APPEARS WRONG }}}\r\n\r\n[INSTRUMENTATION] Test 'Layout 7' completed\r\n\tDuration: 13 ms\r\n\tTime since app launched: 421817 ms\r\n\tMore Info: 56 out of approximately 73 elements laid out. \r\n{code}\r\n\r\n\r\nAnother 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:\r\n\r\n{code}\r\n[INSTRUMENTATION] Test 'Layout 4' completed\r\n\tDuration: 9 ms\r\n\tTime since app launched: 10148 ms\r\n\tMore Info: 56 out of approximately 73 elements laid out. \r\n{code}", "updateAuthor": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "created": "2012-11-05T10:07:30.000+0000", "updated": "2012-11-05T10:08:05.000+0000" }, { "id": "226116", "author": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "body": "One more thing I noticed: when the rows are created in the table view, their height is set to Ti.UI.SIZE, such as:\n\n{code}\nvar _row = Ti.UI.createTableViewRow({\t\t\t\n\theight : Ti.UI.SIZE,\n\tselectionStyle : 'none',\n\ttouchEnabled : false,\n\tselectedColor : 'transparent'\n});\n{code}\n\nIf I change the height to a fixed size, the problem does not occour.", "updateAuthor": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "created": "2012-11-05T10:28:46.000+0000", "updated": "2012-11-05T10:28:46.000+0000" }, { "id": "228059", "author": { "name": "bhughes", "key": "bhughes", "displayName": "Bryan Hughes", "active": true, "timeZone": "America/Los_Angeles" }, "body": "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:\r\n{code:JavaScript}\r\nvar win1 = Ti.UI.createWindow({\r\n navBarHidden : false,\r\n title : 'Test Window',\r\n backgroundColor : 'white',\r\n left : 0,\r\n top : 0\r\n});\r\n \r\nvar tableView = Ti.UI.createTableView({\r\n className: 'session.row.class',\r\n\trowHeight: Ti.UI.SIZE\r\n});\r\n \r\nvar rows = [];\r\n \r\nfor (var d = 0; d < 20; d++) {\r\n var row = Ti.UI.createTableViewRow({\r\n hasChild : true\r\n });\r\n \r\n var name_label = Ti.UI.createLabel({\r\n text : 'Test title
Testing
This is just a label with some text',\r\n top : 5,\r\n left : 5,\r\n width : 300,\r\n color : 'black'\r\n });\r\n \r\n row.add(name_label);\r\n \r\n rows.push(row);\r\n}\r\n \r\ntableView.setData(rows);\r\nwin1.add(tableView);\r\n \r\nwin1.open();\r\n{code}\r\nBTW, a quick side note: 'auto' is converted to Ti.UI.SIZE under the hood in Mobile Web.", "updateAuthor": { "name": "bhughes", "key": "bhughes", "displayName": "Bryan Hughes", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2012-11-20T19:59:02.000+0000", "updated": "2012-11-20T19:59:02.000+0000" }, { "id": "228226", "author": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "body": "Hi Bryan,\n\nThe 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).", "updateAuthor": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "created": "2012-11-21T16:02:55.000+0000", "updated": "2012-11-21T16:02:55.000+0000" }, { "id": "228227", "author": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "body": "Result of the code with rowHeight set to Ti.UI.SIZE attached", "updateAuthor": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "created": "2012-11-21T16:03:58.000+0000", "updated": "2012-11-21T16:04:19.000+0000" }, { "id": "228229", "author": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "body": "An additional note: I see the same result also if I set the height of each row to Ti.UI.SIZE.\r\n\r\nAlso, I do see these behaviors with different browsers:\r\n\r\n1) Firefox 16.0.2: the screenshot is what I see as soon as the app is launched in the browser\r\n2) 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.\r\n3) Safari behaves as Firefox", "updateAuthor": { "name": "dcassenti", "key": "dcassenti", "displayName": "Davide Cassenti", "active": true, "timeZone": "Europe/Berlin" }, "created": "2012-11-21T16:09:34.000+0000", "updated": "2012-11-21T16:09:52.000+0000" }, { "id": "228254", "author": { "name": "bhughes", "key": "bhughes", "displayName": "Bryan Hughes", "active": true, "timeZone": "America/Los_Angeles" }, "body": "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. ", "updateAuthor": { "name": "bhughes", "key": "bhughes", "displayName": "Bryan Hughes", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2012-11-21T18:27:20.000+0000", "updated": "2012-11-21T18:27:20.000+0000" }, { "id": "228271", "author": { "name": "bhughes", "key": "bhughes", "displayName": "Bryan Hughes", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Pull Requests:\nhttps://github.com/appcelerator/titanium_mobile/pull/3456\nhttps://github.com/appcelerator/titanium_mobile/pull/3457", "updateAuthor": { "name": "bhughes", "key": "bhughes", "displayName": "Bryan Hughes", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2012-11-21T19:27:03.000+0000", "updated": "2012-11-21T19:27:03.000+0000" }, { "id": "230338", "author": { "name": "oromero", "key": "oromero", "displayName": "Olga Romero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Closing as fixed for TableView row height.\nTested and verified with:\nTitanium Studio, build: 3.0.0.201211301903\nTitanium SDK, build 3.0.0.v20121206113203\nTitanium SDK, build 3.1.0.v20121206112601\nMountain Lion 10.8.2\niPod 4.3.3\nSimulator 6.0\nEmulator 2.2", "updateAuthor": { "name": "oromero", "key": "oromero", "displayName": "Olga Romero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2012-12-06T23:54:43.000+0000", "updated": "2012-12-06T23:54:43.000+0000" } ], "maxResults": 15, "total": 15, "startAt": 0 } } }