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 Frustration

I've got 5 windows in my app that I'm trying to order the zIndexes of in a specific way but to no avail. The results are completely unpredictable and inconsistent!

Before completely giving up, I'd like to see if there is anyone out there with more experience with zIndexes that might be able to give me some insight into what I may be doing wrong, i.e., are there any gotchas regarding zIndexes that one should be aware of?

— asked June 6th 2010 by Moly Yim
  • iphone
  • ti.ui.window
  • zindex
0 Comments

6 Answers

  • This problems is still not addressed as of 1.8.

    The z-index seems to be completely ignored, instead it matters what order you add the view to the window. Or in my case the order in which I add the window.

    Is there a fix yet?

    — answered January 20th 2012 by Jaime Rodriguez
    permalink
    0 Comments
  • Moly answered it over an year ago, this can be achieved like this:

    
    var image = Titanium.UI.createImageView({...});
    var label = Titanium.UI.createLabel ({...});
    
    win.add(image);
    win.add(label);
    
    //zIndexing 
    image.animate({zIndex:1}); 
    label.animate({zIndex:2});
    
    — answered January 25th 2012 by Hugo Costa
    permalink
    3 Comments
    • That is a workaround, not a solution.

      — commented January 26th 2012 by Jaime Rodriguez
    • Titanium is plagued by workarounds, so it may as well be accepted as a solution :)

      — commented March 4th 2012 by Kelly Martin
    • Anyone got the solution ?

      — commented November 18th 2014 by Nabeel Munawar
  • In native Cocoa there's no such thing as zIndex. There's a bringToFront method, though. From my experience, I believe Appcelerator plays with it or even dispose and creates objects again (?) to enforce it's zIndex property. I couldn't manage to get it to work consistently, too. Tried it on animated ImageViews.

    — answered January 26th 2011 by Diogo Schneider
    permalink
    0 Comments
  • From my experience, z-index applie to views or elements in a view, not for windows

    — answered June 6th 2010 by michel perrin
    permalink
    0 Comments
  • Thanks, Michel, for chiming in. I took your comment to heart and decided on a workaround instead that doesn't depend on having to use zIndex for windows — even thought the API documentation states that zIndex is an available property for the window class:

    http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Window-object

    — answered June 13th 2010 by Moly Yim
    permalink
    0 Comments
  • Moly I'm facing the same problem you had. What was your workaround? I've tried a few thing but no luck

    Thanks

    — answered September 29th 2010 by Brendan McGinn
    permalink
    2 Comments
    • Brendan, looks like the link I posed no longer has the workaround I ended up using (maybe it's been resolved in 1.4), but the workaround I found (which actually works quite well) is to use animate() at the end of your JS file to take care of all your zIndexes, like so:

      //zIndexing
      header.animate({zIndex:1});
      newPlan.animate({zIndex:2});
      edit.animate({zIndex:3});
      hr.animate({zIndex:4});
      tableView.animate({zIndex:5});

      Make sure that it is the very last thing in your JS file(s) and you should be all set!

      — commented September 29th 2010 by Moly Yim
    • Thanks Moly I'll give it a go.

      — commented September 29th 2010 by Brendan McGinn
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.