1. #1
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
    bortron5000 is on a distinguished road

      0  

    Default Unanswered: Using zIndex

    Unanswered: Using zIndex


    Hi All,

    Right now I have a floating tab panel (modal is set to true) with a button on it that spawns another floating panel, this time a form panel. The spawned form panel is appearing behind the initial tab panel (I can close the tab panel and then I'm able to see the form panel). I've tried hard-coding the zIndex config for both panels to pretty much every configuration I could think of, using both raw integers and string values, but the form panel continues to appear behind the tab panel. I've also gotten hold of the components after they've been rendered and confirmed that the zIndex is being set correctly. How can I make the second panel appear in front of the first panel? Thanks

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,789
    Answers
    3465
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    A good UI is to only have one floating component open at once. You can hide one and show the other and when the 2nd closes show the first.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
    bortron5000 is on a distinguished road

      0  

    Default


    Ah ok, that makes sense. For my edification, and to give this thread some sense of purpose, what is zIndex typically used for?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,789
    Answers
    3465
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You have 3 dimensions... x, y, and z. x is the horizontal position, y is the vertical position, z is the level that is "on top" of other elements or behind them.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
    bortron5000 is on a distinguished road

      0  

    Default


    Ok, but if there's only ever one floating component, where does z-Index come in handy?

  6. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    If you have only one floating component, then zIndex is pointless because it is the only item to add into the view hierarchy.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #7
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
    bortron5000 is on a distinguished road

      0  

    Default


    Okay, so what I'm getting is

    1. "A good UI is to only have one floating component open at once"
    2. "If you have only one floating component, zIndex is pointless"

    Therefore, zIndex is pointless?

    Just curious, I've worked around the issue by hiding and showing the panels appropriately anyway, thanks Mitchell.

  8. #8
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Pretty much, yes. But there can be some complex layouts, especially on tablets, which require some overlapping; in which case you'd need zIndex.

    Plus the it is a CSS property and developers tend to do whatever they want, and not necessarily create a "good UI".
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  9. #9
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
    bortron5000 is on a distinguished road

      0  

    Default


    Aha, overlapping, that sounds more like it. Although for the record, I was trying to use zIndex to re-order two floating panels and it didn't seem to affect anything. I suppose we can leave that issue for the "bad UI" developers

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    shukino is on a distinguished road

      0  

    Default change zIndex for floating panel

    change zIndex for floating panel


    I also have questions about changing zIndex for floating panel.

    I plan to migrate my application from sencha-touch 1.1 to 2.0.
    I need to use other javascript component whose zIndex is larger than sencha-touch, even for floating one.

    In sencha-touch 1.1, floating z-index was 10,000, as far as I know.
    In sencha-touch 2.0RC, floating z-index seems 6 in default.

    But I could not change z-index Panel in modal by config parameter: zIndex.

    I tried to change in scss too, but z-index seems to be updated dynamically.
    So not work this too.

    I understand floating zindex specification has changed in sencha-touch 2.0.
    However, could you advice me how to solve this problem?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi