{ "id": "138335", "key": "TIMOB-17881", "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": [], "resolution": { "id": "2", "description": "The problem described is an issue which will never be fixed.", "name": "Won't Fix" }, "resolutiondate": "2015-02-25T20:18:06.000+0000", "created": "2014-10-21T05:44:14.000+0000", "priority": { "name": "High", "id": "2" }, "labels": [], "versions": [ { "id": "15972", "description": "Release 3.4.0", "name": "Release 3.4.0", "archived": false, "released": true, "releaseDate": "2014-09-28" } ], "issuelinks": [], "assignee": { "name": "sdavenport", "key": "sdavenport", "displayName": "Scott Davenport", "active": true, "timeZone": "America/Havana" }, "updated": "2017-03-22T23:03:48.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": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "h4. Problem Description\r\nWhen you rotate a tableview that contains sections with views that do a 'FILL' for height, the refresh / redraw will leave a big white space (i.e., the row won't fill the space after rotation).\r\n\r\nh4. Steps to reproduce\r\n1. Create a new mobile project (classic titanium)\r\n2. Paste this to app.js:\r\n{code}\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor : 'white'\r\n});\r\n\r\nfunction doView(color) {\r\n var view = Titanium.UI.createView({\r\n backgroundColor : color,\r\n });\r\n view.width = 300;\r\n view.height = 400;\r\n Ti.Gesture.addEventListener('orientationchange', function() {\r\n view.width = Ti.Gesture.isPortrait() ? 300 : 400;\r\n view.height = Ti.Gesture.isPortrait() ? 400 : 300;\r\n });\r\n return view;\r\n}\r\n\r\nfunction baseView() {\r\n var view = Ti.UI.createView({\r\n width : '100%',\r\n left : 0,\r\n top : 0,\r\n backgroundColor : 'green',\r\n layout : 'horizontal',\r\n height : Ti.UI.SIZE\r\n });\r\n Ti.Gesture.addEventListener('orientationchange', function() {\r\n view.width = Titanium.Platform.displayCaps.platformWidth;\r\n view.left = 0;\r\n view.top = 0;\r\n view.height = Ti.UI.SIZE;\r\n });\r\n return view;\r\n}\r\n\r\nvar base = baseView();\r\nvar pink = doView('pink');\r\nvar blue = doView('blue');\r\nbase.add(pink);\r\nbase.add(blue);\r\n\r\nvar tableSections = [];\r\nfor (var i = 0; i < 5; i++) {\r\n var row = Titanium.UI.createTableViewRow();\r\n var base = baseView();\r\n var pink = doView('pink');\r\n var blue = doView('blue');\r\n base.add(pink);\r\n base.add(blue);\r\n row.height = 'auto';\r\n row.add(base);\r\n \r\n var section = Titanium.UI.createTableViewSection();\r\n section.height = Ti.UI.SIZE;\r\n section.width = Ti.UI.FILL;\r\n section.setHeaderTitle('Title ' + i);\r\n section.add(row);\r\n tableSections.push(section);\r\n}\r\n\r\nvar table = Ti.UI.createTableView({\r\n objName : 'table',\r\n height: Ti.UI.SIZE\r\n});\r\n\r\ntable.setSections(tableSections);\r\nwin.add(table);\r\nwin.open(); \r\n{code}\r\n3. Run it in ipad simulator or ipad device. \r\n4. You will see that a big white section is added after rotating twice the device. \r\n\r\n", "attachment": [], "flagged": false, "summary": "iOS: Tableview with sections will fail to fill properly the rows after rotating", "creator": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "subtasks": [], "reporter": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "environment": "Mobile SDK 3.4.0\r\niOS 8.0.1\r\nipad simulator and ipad air device. ", "comment": { "comments": [ { "id": "334309", "author": { "name": "cng", "key": "cng", "displayName": "Chee Kiat Ng", "active": false, "timeZone": "America/Los_Angeles" }, "body": "Initial testings indicated that this happens on iOS 7.1 simulator, but on iOS 8.1, the white space appears momentarily, if it's scrolled slightly it will disappear.", "updateAuthor": { "name": "cng", "key": "cng", "displayName": "Chee Kiat Ng", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2014-12-02T06:34:58.000+0000", "updated": "2014-12-02T06:34:58.000+0000" }, { "id": "344349", "author": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "body": "What you really want to do is refresh the whole tableView in a single call instead of updating view piecemeal. The TableView API is really not built for this. What the developer should do is use the ListView and manipulate the defaultItemTemplate property of the listView. Attaching sample below\r\n{code}\r\nvar win = Ti.UI.createWindow({backgroundColor:'white',fullscreen:true})\r\n\r\nvar pTemplate = {\r\n properties:{height:400,backgroundColor:'green'},\r\n childTemplates: [\r\n { \r\n type: 'Ti.UI.View', \r\n bindId: 'pinkView', \r\n properties: {width: 300, left: 0,top:0,backgroundColor:'pink'}\r\n },\r\n {\r\n type: 'Ti.UI.View',\r\n bindId: 'blueView',\r\n properties: {width: 300, left: 300,top:0,backgroundColor:'blue'}\r\n }\r\n ]\r\n};\r\n\r\nvar hTemplate = {\r\n properties:{height:300,backgroundColor:'green'},\r\n childTemplates: [\r\n { \r\n type: 'Ti.UI.View', \r\n bindId: 'pinkView', \r\n properties: {width: 400, left: 0,top:0,backgroundColor:'pink'}\r\n },\r\n {\r\n type: 'Ti.UI.View',\r\n bindId: 'blueView',\r\n properties: {width: 400, left: 400,top:0, backgroundColor:'blue'}\r\n }\r\n ]\r\n};\r\n\r\n\r\nvar listSections = [];\r\nfor (var i = 0; i < 5; i++) {\r\n var section = Ti.UI.createListSection({ headerTitle: 'Title '+i});\r\n section.setItems([{}]);\r\n listSections.push(section);\r\n}\r\n\r\nvar listView = Ti.UI.createListView({\r\n templates: { 'pt': pTemplate, 'ht':hTemplate },\r\n sections:listSections\r\n});\r\n\r\n\r\n\r\nwin.add(listView);\r\n\r\n\r\nfunction updateRows()\r\n{\r\n if(Ti.Gesture.isPortrait()){\r\n listView.defaultItemTemplate = 'pt';\r\n } else {\r\n listView.defaultItemTemplate = 'ht';\r\n }\r\n}\r\n\r\nupdateRows();\r\n\r\nwin.addEventListener('close',function(){\r\n Ti.Gesture.removeEventListener('orientationchange', updateRows);\r\n})\r\nwin.addEventListener('open',function(){\r\n Ti.Gesture.addEventListener('orientationchange', updateRows);\r\n})\r\n\r\nwin.open();\r\n{code}\r\n\r\n\r\nIf you wish to do the same using TableViews you can try the code below. Note that there is a single event listener for orientationChange and all the work is done there.\r\n{code}\r\nvar win = Ti.UI.createWindow({backgroundColor : 'white', fullscreen:true});\r\n \r\nfunction doView(color) {\r\n var view = Titanium.UI.createView({\r\n backgroundColor : color,\r\n top:0,\r\n });\r\n return view;\r\n}\r\n\r\nvar tableSections = [];\r\nfor (var i = 0; i < 5; i++) {\r\n var row = Titanium.UI.createTableViewRow({backgroundColor:'green'});\r\n var pink = doView('pink');\r\n var blue = doView('blue');\r\n row.add(pink);\r\n row.add(blue);\r\n \r\n \r\n var section = Titanium.UI.createTableViewSection();\r\n section.setHeaderTitle('Title ' + i);\r\n section.add(row);\r\n tableSections.push(section);\r\n}\r\n\r\nfunction updateRows()\r\n{\r\n var isPortrait = Ti.Gesture.isPortrait();\r\n for(var index=0;index