Titanium JIRA Archive
Appcelerator Community (AC)

[AC-3013] Android: "horizontal" layout doesn't work well

GitHub Issuen/a
TypeBug
Priorityn/a
StatusClosed
ResolutionFixed
Resolution Date2012-07-19T10:14:17.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsn/a
ReporterIvan Skugor
AssigneeCarter Lathrop
Created2012-05-16T04:48:34.000+0000
Updated2016-03-08T07:48:02.000+0000

Description

The problem

View doesn't layout child components well when "horizontal" layout is used and child component has margins defined via "left" and "top" properties. To see this, run this example:
(function() {
     
    var win = Ti.UI.createWindow({ navBarHidden: true });
    
    var view = Ti.UI.createView({
    	height: Ti.UI.FILL,
    	width: Ti.UI.FILL,
    	backgroundColor: "#fff",
    	layout: "horizontal"
    });
    
    for (var i = 0; i < 10; ++i) {
    	view.add(Ti.UI.createLabel({ height: "75dp", width: Ti.UI.FILL, text: "Label " + i, left: 20, top: 10, backgroundColor: "#00f" }));
    }
    
    win.add(view);
    
    win.open();
    
})();
You should see that first label has top and left margin, while others do not.

Expected behavior

All labels should behave in same manner - they should all have top and left margins, not only the first one.

Comments

  1. Davide Cassenti 2012-06-05

    Hello Ivan, why are you using the 'horizontal' layout, if your label has a witdh equals to Ti.UI.FILL? Using the 'vertical' layout, the result should be the one you are looking for: labels are placed 20px from the left and 10px from the top, and they are as large as the display; you can also test setting a fixed width for the labels (e.g. 75dp) and see that they are correctly placed in the screen (e.g. second one is 20px right the first one etc.). Isn't this the result you want to achieve? Can you explain more in detail, in case the goal is different? Thank you
  2. Ivan Skugor 2012-06-06

    Hello Davide. I'm trying to position label-input pairs. label1 input1 label2 input2 To make that look better, I want to have left and top margin. This issue was reported because I couldn't achieve that with "horizontal" layout. The test case is reduced so it represents minimal example that shows the issue. I tried to use "vertical" layout, but it has some other problems. :) Thanks for your help.
  3. Carter Lathrop 2012-07-17

    Ivan, I have tried to follow all the steps you provided in order to reproduce this error you are seeing. After running the code you provided on an asus ee pad (3.2), I see no error or anything working different from how it should. Can you provide a screenshot or a more detailed explanation of what is not working "well"? Thank you, Carter
  4. Ivan Skugor 2012-07-18

    Hi Carter, this issue seems to be fixed with latest CI build. Don't know what commit fixed it, but you can close it now. :) Thanks.

JSON Source