Titanium Community Questions & Answer Archive

Question

zIndex not working on Views

I have views that overlap and as soon as I add a backgroundColor to some of the views, the view overlaps another view even though I have the zIndex set. Any ideas?

var container = Titanium.UI.createView();

for (var wnw = 1; wnw < 30; wnw++) {

if (wnw != 2 && wnw != 4 && wnw != 7 && wnw != 9 && wnw != 11 &&
 wnw != 14 && wnw != 16 && wnw != 19 && wnw != 21 &&
 wnw != 23 && wnw != 26 && wnw != 28) {

var sign = Titanium.UI.createView({
                    id:wnw,
                    zIndex:10,
                    top: 0,
                    left: wLeft,
                    borderColor: 'black',
                    backgroundColor:colorNote(wnw,nSign[x]),
                    height: 75,
                    width: 19
                });
                wLeft += 19;

            }else{
                var sign = Titanium.UI.createView({
                    id:wnw,
                    zIndex:30,
                    top: 0,
                    left: bLeft,
                    backgroundColor: 'black',
                    height: 50,
                    width: 14
                });

                if(wnw==4 || wnw==11 || wnw==16 || wnw==23 || wnw==28){bLeft += 19*2}else{bLeft += 19;}
            } row.add(sign);
        }

Answer 1

Hi Rene Cabrera,

I just use two views and here zIndex works properly. You can follow this code.

var win = Ti.UI.createWindow({
        title:'zIndex',
        backgroundColor:"#fff"
    });
    // var scrollView = Ti.UI.createScrollView({height:200,top:0});
    // win.add(scrollView);

    var view1 = Ti.UI.createView({
        backgroundColor:"red",
        width:Titanium.UI.FILL,
        height:60,
        zIndex:10,
        top:0,
    });
    win.add(view1);
    var view2 = Ti.UI.createView({
        backgroundColor:'blue',
        width:50,
        height:50,
        zIndex:11,
        top:40,
        left:15
    });


win.add(view2);
    win.open();

Thanks

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

zIndex not working on Views

1 Answer