Question

I’m having a display problem when I try to add a View with 100% height in Titanium – it appears correctly on Android but not on iOS. Here’s a simplified code:

Ti.UI.setBackgroundColor('#000');

var win = Ti.UI.createWindow({  
    title:'win',
    backgroundColor:'#fff'
});

var s = Ti.UI.createView({
    width:'100%',
    height:'100%',
    backgroundColor:'red',
    layout: 'horizontal'
});

var r = Ti.UI.createView({
    backgroundColor:'yellow',
    width:300,
    height:'100%' // problem
})

s.add(r);

win.add(s);
win.open();

Result on Android (correct):

Result on iPad:

It does work if I set the height to a finite number, but I want the view to cover the entire height. How can I accomplish this, and why doesn’t 100% height work on iOS?

Answer 1

It probably has to do with adding a view to a view. If you add the yellow view to the window, and give zIndex to the both views, it works correctly.

For aligning it left, you should use left: 0;, not layout: 'horizontal' as according to the documentation the layout property does not exists: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Window-object

var s = Ti.UI.createView({
    width:'100%',
    height:'100%',
    backgroundColor:'red',
    zIndex: 1
});

var r = Ti.UI.createView({
    backgroundColor:'yellow',
    width:300,
    height:'100%', // no problem
    zIndex: 2,
    left: 0
});

win.add(r);