Gap in vertical layout - Titanium

Question

I have two views within a scroll view that are placed using the vertical layout property. I have tried numerous combinations but always get a huge gap between the two views.

var view = Titanium.UI.createScrollView({
    top:0,
    width:Ti.UI.width,
    layout:'vertical'
});
contentWin.add(view);

var floor1view = Titanium.UI.createView({
    layout: 'horizontal'
});
view.add(floor1view);
var floor1viewlower = Titanium.UI.createView({
    top: 0,
    layout: 'horizontal'
});
view.add(floor1viewlower);

I am then able to add objects to the floor views without issue.

Answer 1

Layout is for parent view not for children.

Appcelerator Documentation says:

Vertical. Children are laid out vertically from top to bottom. The first child is laid out top units from its parent's bounding box. Each subsequent child is laid out below the previous child. The space between children is equal to the upper child's bottom value plus the lower child's top value. Each child is positioned horizontally as in the composite layout mode.

Horizontal. Horizontal layouts have different behavior depending on whether wrapping is enabled. Wrapping is enabled by default (the horizontalWrap property is true).Vertical layout determines the position of children according to their top and bottom. With wrapping behavior, the children are laid out horizontally from left to right, in rows. If a child requires more horizontal space than exists in the current row, it is wrapped to a new row. The height of each row is equal to the maximum height of the children in that row.

So, you should use horizontal and set children width to parent width for remove gap.

var view = Titanium.UI.createScrollView({
    top: 0,
    left: 0,
    height: contentWin.height,
    width: contentWin.width,
    layout: 'horizontal'
});
contentWin.add(view);

var floor1view = Titanium.UI.createView({
    width: view.width,
    height: 50,
    backgroundColor: '#00FF00'
});
view.add(floor1view);

var floor1viewlower = Titanium.UI.createView({
    width: view.width,
    height: 100,
    backgroundColor: '#FF0000'
});
view.add(floor1viewlower);

Gap should be children height. It is works on iOS 7.1, Titanium SDK 3.3.0GA, OSX 10.9.4