{ "id": "114263", "key": "AC-2023", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "12217", "key": "AC", "name": "Appcelerator - INBOX", "projectCategory": { "id": "10000", "description": "", "name": "Customer Service" } }, "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2013-05-29T18:39:07.000+0000", "created": "2013-05-13T02:20:22.000+0000", "labels": [ "triage" ], "versions": [], "issuelinks": [], "assignee": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "updated": "2016-03-08T07:40:58.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": "14544", "name": "Alloy", "description": "Please enter tickets related to the Alloy here." }, { "id": "14548", "name": "Titanium SDK & CLI", "description": "Please enter tickets related to the MobileSDK here." } ], "description": "*Problem description*\r\nI have a view set to layout horizontal, I then add 7 views which are layout vertical and have widths of '33%'. This works great on android but on iphone the spaces spaces between each row huge. Maybe there is something obvious I am missing? It seems like this would be pretty basic. \r\n\r\nIt was recommended that I make a bug report here [http://developer.appcelerator.com/question/152272/ios--alloy-layout-horizontal-adds-space-to-the-top-and-bottom-of-inner-elements]\r\n\r\nHere is a picture of the iOS and Android render. [http://i.imgur.com/6Gx7b1U.png] (also attached)\r\n\r\nI have a View set in an alloy xml view\r\n{code:xml|title=AddAlarm.xml} \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\nand here is the relevant part of the tss\r\n{code:javascript|title=AddAlarm.tss} \r\n// AddAlarm.tss\r\n\"#repeat\":{\r\n width: Ti.UI.FILL\r\n ,height: Ti.UI.SIZE\r\n ,left: '10dip'\r\n ,right: '10dip'\r\n ,layout:'horizontal'\r\n \r\n},\r\n{code}\r\nThis is the function which generates the views with the switches in them (from my utils)\r\n{code:javascript|title=lib/tools.js}\r\n// lib/tools.js\r\nmodule.exports = (function(){\r\n return {\r\n /**\r\n * Creates a checkbox which can be used on android or anything else.\r\n * @param {Object} specs\r\n * Object which holds the specs to be defined.\r\n */\r\n createCheckbox: function(specs) {\r\n var is_android = Ti.Platform.osname == 'android';\r\n if(typeof specs != \"object\")\r\n specs = {};\r\n var checkbox;\r\n checkbox = Ti.UI.createSwitch({\r\n style : is_android?Ti.UI.Android.SWITCH_STYLE_CHECKBOX:null,\r\n value : false,\r\n height : Ti.UI.SIZE,\r\n width : Ti.UI.SIZE\r\n });\r\n \r\n var view = Ti.UI.createView({\r\n height: specs.height || Ti.UI.SIZE,\r\n width: specs.width || Ti.UI.SIZE,\r\n layout: specs.layout || 'vertical',\r\n top: specs.top || '0dip',\r\n bottom: specs.bottom || '0dip',\r\n backgroundColor:'red'\r\n });\r\n \r\n if(specs.label){\r\n if(typeof specs.label == 'string'){\r\n var lbl = Ti.UI.createLabel({\r\n height: Ti.UI.SIZE,\r\n width: Ti.UI.SIZE,\r\n text: specs.label,\r\n color: 'black',\r\n font: {fontSize: '15dip'}\r\n });\r\n view.add(lbl);\r\n // view.label = lbl;\r\n }\r\n else{\r\n view.add(specs.label);\r\n }\r\n }\r\n view.checked = false;\r\n view.add(checkbox);\r\n \r\n function togglecheck () {\r\n if(!view.checked) {\r\n view.checked = true;\r\n }\r\n else {\r\n view.checked = false;\r\n } \r\n };\r\n view.addEventListener('change', togglecheck);\r\n \r\n return view;\r\n },\r\n// ....\r\n{code}\r\nHere is the adding of the views with the switches in them.\r\n{code:javascript|title=AddAlarm.js|borderStyle=solid} \r\n// AddAlarm.js\r\nch_sun = utils.createCheckbox({label:\" Sunday\", width:'33%'});\r\nch_mon = utils.createCheckbox({label:\" Monday\", width:'33%'});\r\nch_tue = utils.createCheckbox({label:\" Tuesday\", width:'33%'});\r\nch_wed = utils.createCheckbox({label:\" Wednesday\", width:'33%'});\r\nch_thu = utils.createCheckbox({label:\" Thursday\", width:'33%'});\r\nch_fri = utils.createCheckbox({label:\" Friday\", width:'33%'});\r\nch_sat = utils.createCheckbox({label:\" Saturday\", width:'99%'});\r\n \r\n$.repeat.add(ch_sun);\r\n$.repeat.add(ch_mon);\r\n$.repeat.add(ch_tue);\r\n$.repeat.add(ch_wed);\r\n$.repeat.add(ch_thu);\r\n$.repeat.add(ch_fri);\r\n$.repeat.add(ch_sat);\r\n{code}\r\n\r\nSorry for any formatting errors, It's my first time submitting something here. I realize it may be hard to read the code on this, so I uploaded the whole project to github [https://github.com/5wooley4/RemindMe-Chain/tree/master/app]\r\n\r\n*Workaround*\r\nI discovered a workaround, and part of the cause. The bug was only happening when there was a label added to the view with the switch in it (generated in tools.js). I changed the height of label from Ti.UI.SIZE to '20dip', and it worked normally on ios.\r\n{code:javascript|title=tools.js}\r\n// tools.js\r\n//................\r\n var lbl = Ti.UI.createLabel({\r\n\t\t\t\t\t\theight:'20dip',\r\n\t\t\t\t\t\twidth: Ti.UI.SIZE,\r\n\t\t\t\t\t\ttext: specs.label,\r\n\t\t\t\t\t\tcolor: 'black',\r\n\t\t\t\t\t\tfont: {fontSize: '15dip'}\r\n\t\t\t\t\t});\r\n\t\t\t\t\tview.add(lbl);\r\n// ...................\r\n{code}", "attachment": [ { "id": "38386", "filename": "Screen Shot 2013-05-12 at 10.32.49 AM.png", "author": { "name": "kaladin", "key": "kaladin", "displayName": "Eric Wooley", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-05-13T02:20:23.000+0000", "size": 62692, "mimeType": "image/png" } ], "flagged": false, "summary": "iOS: Layout horizontal adds space to the top and bottom of inner elements", "creator": { "name": "kaladin", "key": "kaladin", "displayName": "Eric Wooley", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "kaladin", "key": "kaladin", "displayName": "Eric Wooley", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "Mountain lion\r\nIOS Simulator Version 6.0 (369.2)\r\nTitanium Studio build: 3.1.0.201304151600\r\nAlloy (I am not sure how to tell which version)", "comment": { "comments": [ { "id": "254606", "author": { "name": "dsefton", "key": "dsefton", "displayName": "Daniel Sefton", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Supplied project is using 3.0.0 GA. This bug is fixed in 3.0.2 GA and above. Tested in iOS 6 simulator.", "updateAuthor": { "name": "dsefton", "key": "dsefton", "displayName": "Daniel Sefton", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-05-29T18:39:07.000+0000", "updated": "2013-05-29T18:39:07.000+0000" } ], "maxResults": 2, "total": 2, "startAt": 0 } } }