{ "id": "120144", "key": "TIMOB-15291", "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": "15695", "description": "2013 Sprint 20", "name": "2013 Sprint 20", "archived": true, "released": true, "releaseDate": "2013-10-04" }, { "id": "15696", "description": "2013 Sprint 20 API", "name": "2013 Sprint 20 API", "archived": true, "released": true, "releaseDate": "2013-10-04" }, { "id": "15747", "description": "Release 3.1.4", "name": "Release 3.1.4", "archived": true, "released": false }, { "id": "14982", "description": "Release 3.2.0", "name": "Release 3.2.0", "archived": false, "released": true, "releaseDate": "2013-12-19" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2013-09-26T17:29:17.000+0000", "created": "2013-09-18T13:07:21.000+0000", "priority": { "name": "High", "id": "2" }, "labels": [ "3.1.3", "alloy", "ios7", "listview", "qe-closed-3.1.4", "qe-testadded" ], "versions": [], "issuelinks": [ { "id": "31988", "type": { "id": "10003", "name": "Relates", "inward": "relates to", "outward": "relates to" }, "outwardIssue": { "id": "119980", "key": "TIMOB-15193", "fields": { "summary": "iOS7: ListItems in ListView are white and not transparent, strange separators", "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" } }, "priority": { "name": "High", "id": "2" }, "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false } } } } ], "assignee": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "updated": "2014-06-19T12:44:28.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": "h5. Problem description\r\n'transparent' backgroundColor property for ListView Templates is showing a 'white' backgroundColor in the ListItems instead of a transparent one. \r\nSetting a color it works as expected.\r\n\r\n\r\nh5. Sample code and steps to reproduce\r\n\r\nFollowing sample code is basically the one available here http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.ListItem , adding \r\n{code}\r\nproperties: {\r\n \t\tbackgroundColor: 'transparent', // this will set the backgroundColor to white.\r\n \t\t// backgroundColor: 'green' // set the background to a color works\r\n \t},\r\n{code}\r\nto the 'plainTemplate' template.\r\n\r\n{code}\r\nvar win = Ti.UI.createWindow({\r\n\tbackgroundColor: 'yellow',\r\n\ttop:20\r\n});\r\n\r\nvar plainTemplate = {\r\n childTemplates: [\r\n { // Image justified left\r\n type: 'Ti.UI.ImageView', // Use an image view for the image\r\n bindId: 'pic', // Maps to a custom pic property of the item data\r\n properties: { // Sets the image view properties\r\n width: '50dp', height: '50dp', left: 0\r\n }\r\n },\r\n { // Title\r\n type: 'Ti.UI.Label', // Use a label for the title\r\n bindId: 'title', // Maps to a custom title property of the item data\r\n properties: { // Sets the label properties\r\n color: 'black',\r\n font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },\r\n left: '60dp', top: 0,\r\n },\r\n },\r\n { // Subtitle\r\n type: 'Ti.UI.Label', // Use a label for the subtitle\r\n bindId: 'subtitle', // Maps to a custom subtitle property of the item data\r\n properties: { // Sets the label properties\r\n color: 'gray',\r\n font: { fontFamily:'Arial', fontSize: '14dp' },\r\n left: '60dp', top: '25dp',\r\n }\r\n }\r\n ],\r\n \tproperties: {\r\n \t\t// These are the same as the list data item properties\r\n \t\t// The list data item properties supersedes these if both are defined\r\n \t\tbackgroundColor: 'transparent', // this will set the backgroundColor to white.\r\n \t\t// backgroundColor: 'green' // set the background to a color works\r\n \t},\r\n // Binds a callback to the click event, which catches events bubbled by the view subcomponents.\r\n events: {click: toggleCheck }\r\n};\r\n\r\n// The following API calls are equivalent to using jQuery.extend(true, {}, oldObject)\r\n// Copy the plainTemplate\r\nvar redTemplate = JSON.parse(JSON.stringify(plainTemplate));\r\n// Change the text color to red\r\nredTemplate.childTemplates[1].properties.color = 'red';\r\nredTemplate.childTemplates[2].properties.color = 'red';\r\n// Rebind the click event callback\r\nredTemplate.events.click = toggleCheck;\r\n\r\nvar listView = Ti.UI.createListView({\r\n // Maps plainTemplate to 'uncheck' and redTemplate to 'check' \r\n templates: { 'uncheck': plainTemplate, 'check': redTemplate },\r\n // Use 'uncheck', that is, the plainTemplate created earlier for all items\r\n // Can be overridden by the item's template property\r\n defaultItemTemplate: 'uncheck',\r\n backgroundColor:'purple'\r\n});\r\n\r\nvar tasks = [\r\n {id: 'trash', name: 'Take Out the Trash', person: 'Yakko', icon: 'trash.png'},\r\n {id: 'dishes', name: 'Do the Dishes', person: 'Wakko', icon: 'dishes.png'},\r\n {id: 'doggie', name: 'Walk the Dog', person: 'Dot', icon: 'doggie.png'}\r\n];\r\n\r\nvar data = [];\r\nfor (var i = 0; i < tasks.length; i++) {\r\n data.push({\r\n // Maps to the title component in the template\r\n // Sets the text property of the Label component\r\n title : { text: tasks[i].name },\r\n // Maps to the subtitle component in the template\r\n // Sets the text property of the Label component\r\n subtitle : { text : tasks[i].person },\r\n // Maps to the pic component in the template\r\n // Sets the image property of the ImageView component\r\n pic : { image : tasks[i].icon },\r\n // Sets the regular list data properties\r\n properties : {\r\n itemId: tasks[i].id,\r\n accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,\r\n // backgroundColor:'transparent' //this works\r\n }\r\n });\r\n}\r\n\r\nvar section = Ti.UI.createListSection();\r\nsection.setItems(data);\r\nlistView.sections = [section];\r\n\r\n// Modified version of the `itemclick` event listener\r\n// Changes the item template rather than the list item's color property\r\nfunction toggleCheck (e) {\r\n var item = section.getItemAt(e.itemIndex);\r\n if (item.properties.accessoryType == Ti.UI.LIST_ACCESSORY_TYPE_NONE) {\r\n item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK;\r\n item.template = 'check';\r\n }\r\n else {\r\n item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_NONE;\r\n item.template = 'uncheck';\r\n }\r\n section.updateItemAt(e.itemIndex, item);\r\n} \r\n\r\nwin.add(listView);\r\nwin.open();\t\r\n{code}\r\n\r\n\r\nh5. Further sample\r\n\r\nThis is the Alloy sample originally provided from community.\r\n\r\nindex.xml\r\n{code}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n{code}\r\n\r\nindex.tss\r\n{code}\r\n\".container\": {\r\n backgroundColor:\"black\"\r\n}\r\n\"ListView\":{\r\n backgroundColor: 'transparent'\r\n}\r\n\"#lv\": {\r\n top: '10dp',\r\n height: '100dp'\r\n}\r\n\"#lv2\": {\r\n top: '110dp',\r\n height: '300dp'\r\n}\r\n{code}", "attachment": [], "flagged": false, "summary": "iOS7: backgroundColor=\"transparent\" doesn't work on custom templates", "creator": { "name": "mokesmokes", "key": "mokesmokes", "displayName": "Mark Mokryn", "active": true, "timeZone": "Asia/Jerusalem" }, "subtasks": [], "reporter": { "name": "fcasali", "key": "fcasali", "displayName": "Federico Casali", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "alloy 1.2.2 GA, latest 3.1.3.GA, iOS7", "comment": { "comments": [ { "id": "271989", "author": { "name": "fcasali", "key": "fcasali", "displayName": "Federico Casali", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I've been able to reproduce the issue also using a common titanium code.\nMoving to Timob and attaching sample code.", "updateAuthor": { "name": "fcasali", "key": "fcasali", "displayName": "Federico Casali", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-09-19T20:35:56.000+0000", "updated": "2013-09-19T20:35:56.000+0000" }, { "id": "271992", "author": { "name": "mokesmokes", "key": "mokesmokes", "displayName": "Mark Mokryn", "active": true, "timeZone": "Asia/Jerusalem" }, "body": "More clarity: I am successfully setting ListItem backgrounds to \"transparent\" dynamically on iOS7 on custom items, e.g. \r\n{code}\r\nitem.properties.backgroundColor = 'transparent';\r\n{code}\r\nbut doing this in the template definition doesn't work. So there is a workaround....", "updateAuthor": { "name": "mokesmokes", "key": "mokesmokes", "displayName": "Mark Mokryn", "active": true, "timeZone": "Asia/Jerusalem" }, "created": "2013-09-19T20:50:32.000+0000", "updated": "2013-09-19T20:52:16.000+0000" }, { "id": "272043", "author": { "name": "fcasali", "key": "fcasali", "displayName": "Federico Casali", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Mark: yes, in particular with Alloy, in the app.tss you can use\n{code}\n\"ListItem\":{\n\tbackgroundColor: 'transparent'\n}\n{code}\nand the rows should be transparent as expected.\n\nThe problem, as you wrote, is when using the 'transparent' value in the property inside the template definition.", "updateAuthor": { "name": "fcasali", "key": "fcasali", "displayName": "Federico Casali", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-09-19T23:01:53.000+0000", "updated": "2013-09-19T23:01:53.000+0000" }, { "id": "272094", "author": { "name": "mokesmokes", "key": "mokesmokes", "displayName": "Mark Mokryn", "active": true, "timeZone": "Asia/Jerusalem" }, "body": "Federico - I just tried setting the style in app.tss, and it doesn't work (on iOS7 of course). Only works if I do it in the Javascript as above.", "updateAuthor": { "name": "mokesmokes", "key": "mokesmokes", "displayName": "Mark Mokryn", "active": true, "timeZone": "Asia/Jerusalem" }, "created": "2013-09-20T09:40:04.000+0000", "updated": "2013-09-20T09:40:04.000+0000" }, { "id": "272153", "author": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "body": "Pull pending against master\r\nhttps://github.com/appcelerator/titanium_mobile/pull/4721", "updateAuthor": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2013-09-20T18:03:46.000+0000", "updated": "2013-09-20T18:03:46.000+0000" }, { "id": "272208", "author": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "body": "Backport to 3_1_X\nhttps://github.com/appcelerator/titanium_mobile/pull/4722", "updateAuthor": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2013-09-20T20:42:42.000+0000", "updated": "2013-09-20T20:42:42.000+0000" }, { "id": "272354", "author": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "body": "Needs more fixes in master and for iOS6", "updateAuthor": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2013-09-21T21:50:47.000+0000", "updated": "2013-09-21T21:50:47.000+0000" }, { "id": "272355", "author": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "body": "New PR against master\r\nhttps://github.com/appcelerator/titanium_mobile/pull/4729", "updateAuthor": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2013-09-21T21:51:23.000+0000", "updated": "2013-09-23T21:59:22.000+0000" }, { "id": "273205", "author": { "name": "oromero", "key": "oromero", "displayName": "Olga Romero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Tested the above Alloy sample originally provided from community and verified transparent color works with:\n\nAppcelerator Studio, build: 3.1.3.201309132456\nTitanium SDK, build: 3.1.4.v20130926144546\nAlloy 1.2.2\nCLI 3.1.2\nDevice:\niPhone 5s iOS7\niPhone 5c iOS7.0.2(11A501)\n\n", "updateAuthor": { "name": "oromero", "key": "oromero", "displayName": "Olga Romero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-09-27T17:41:43.000+0000", "updated": "2013-09-27T17:41:43.000+0000" }, { "id": "274397", "author": { "name": "janhelleman", "key": "janhelleman", "displayName": "Jan Helleman", "active": true, "timeZone": "Europe/Berlin" }, "body": "So far, I have seen it going white or not white 50% of the time. How is that possible? Sometimes I see it flickering for a very small moment. \r\n\r\n3.1.4.v20131008163742", "updateAuthor": { "name": "janhelleman", "key": "janhelleman", "displayName": "Jan Helleman", "active": true, "timeZone": "Europe/Berlin" }, "created": "2013-10-09T17:15:43.000+0000", "updated": "2013-10-09T17:15:43.000+0000" } ], "maxResults": 11, "total": 11, "startAt": 0 } } }