Dynamic z-ordering of items
-
Hi everyone.
I am currently working on DropDown/ComboBox-like component and got stuck with z-ordering.
My drop down opens to up and down and I need it to overlay other components in this state. And in case two drop downs are nearby (vertically), they have to overlay each other on opening.How to make my two or more components to overflow each other?
Thanks in advance.
-
Hi, tucnak!
Thanks, that works pretty well when both items are in the same parent item.
But it does nothing when dropdowns are palced into different parent items, e.g.:
@
Column {
Item {
Text {...}
DropDown {...}
}
Item {
Text {...}
DropDown {...}
}
}
@Any ideas?
-
[quote author="trollixx" date="1352742212"]Hi, tucnak!
Thanks, that works pretty well when both items are in the same parent item.
But it does nothing when dropdowns are palced into different parent items, e.g.:
@
Column {
Item {
Text {...}
DropDown {...}
}
Item {
Text {...}
DropDown {...}
}
}
@Any ideas?[/quote]
Try to set z-index in this way: 1000+<global-level>*100+<local-level>. z-index should be global on the whole page.
-
[quote author="dmcr" date="1353333695"]If the two parents items are in the same z level and are not overlay each other, (which is the case till there are placed in a Column element), isnt'it possible to give the z-index to the item instead of the dropdown?[/quote]
A component should be universal and be easily integrated in any layout. So, your suggestion sounds like a workaround or hack but not a good solution :(
-
I've asked a question....
For me your component has to be the whole Column or at least the Item (then it would be simple).
If not, then you had to implement some javascript to do the job.
And/Or....
Your dropdown has not to include the z-order, and then the component is still done with "correct style" :)