Titanium JIRA Archive
Appcelerator Community (AC)

[AC-2023] iOS: Layout horizontal adds space to the top and bottom of inner elements

GitHub Issuen/a
Resolution Date2013-05-29T18:39:07.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAlloy, Titanium SDK & CLI
ReporterEric Wooley
AssigneeMauro Parra-Miranda


*Problem description* I 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. It 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] Here is a picture of the iOS and Android render. [http://i.imgur.com/6Gx7b1U.png] (also attached) I have a View set in an alloy xml view
<!-- AddAlarm.xml -->
    <Window class='container' id="win">
            <Label class='header'>Add New Alarm</Label>
            <View id="overview">
                <TextField hintText="Alarm Name" borderStyle="Ti.UI.INPUT_BORDERSTYLE_ROUNDED" id="alarm_name" />
                <View class='form' id='form'> </View>
                <View id="repeat">
                <Button onClick="close" id="create_alarm">Add Alarm</Button>
                <Button onClick="close" class='pink' id="cancel_alarm">Cancel</Button>
and here is the relevant part of the tss
// AddAlarm.tss
    width: Ti.UI.FILL
    ,height: Ti.UI.SIZE
    ,left: '10dip'
    ,right: '10dip'
This is the function which generates the views with the switches in them (from my utils)
// lib/tools.js
module.exports = (function(){
    return {
         * Creates a checkbox which can be used on android or anything else.
         * @param {Object} specs
         * Object which holds the specs to be defined.
        createCheckbox: function(specs) {
            var is_android = Ti.Platform.osname == 'android';
            if(typeof specs != "object")
                specs = {};
            var checkbox;
                checkbox = Ti.UI.createSwitch({
                    style : is_android?Ti.UI.Android.SWITCH_STYLE_CHECKBOX:null,
                    value : false,
                    height : Ti.UI.SIZE,
                    width : Ti.UI.SIZE
            var view = Ti.UI.createView({
                height: specs.height || Ti.UI.SIZE,
                width: specs.width || Ti.UI.SIZE,
                layout: specs.layout || 'vertical',
                top: specs.top || '0dip',
                bottom: specs.bottom || '0dip',
                if(typeof specs.label == 'string'){
                    var lbl = Ti.UI.createLabel({
                        height: Ti.UI.SIZE,
                        width: Ti.UI.SIZE,
                        text: specs.label,
                        color: 'black',
                        font: {fontSize: '15dip'}
                    // view.label = lbl;
            view.checked = false;
            function togglecheck () {
                if(!view.checked) {
                    view.checked = true;
                else {
                    view.checked = false;
            view.addEventListener('change', togglecheck);
            return view;
// ....
Here is the adding of the views with the switches in them.
// AddAlarm.js
ch_sun = utils.createCheckbox({label:" Sunday", width:'33%'});
ch_mon = utils.createCheckbox({label:" Monday", width:'33%'});
ch_tue = utils.createCheckbox({label:" Tuesday", width:'33%'});
ch_wed = utils.createCheckbox({label:" Wednesday", width:'33%'});
ch_thu = utils.createCheckbox({label:" Thursday", width:'33%'});
ch_fri = utils.createCheckbox({label:" Friday", width:'33%'});
ch_sat = utils.createCheckbox({label:" Saturday", width:'99%'});
Sorry 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] *Workaround* I 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.
// tools.js
                                        var lbl = Ti.UI.createLabel({
						width: Ti.UI.SIZE,
						text: specs.label,
						color: 'black',
						font: {fontSize: '15dip'}
// ...................


Screen Shot 2013-05-12 at 10.32.49 AM.png2013-05-13T02:20:23.000+000062692


  1. Daniel Sefton 2013-05-29

    Supplied project is using 3.0.0 GA. This bug is fixed in 3.0.2 GA and above. Tested in iOS 6 simulator.

JSON Source