View Full Version : Z-index of an item is only applied to siblings

20th January 2011, 18:20
I would like to implement a popup that opens up when I click one area. It would work like the popup of a combo box. I already have it more or less working but I have two problems:

I can use "z" to make it stay on top of other items from the same parent. However, items that are defined after the parent are displayed on top of the popup. For example:

Item {
Item {
x: 0; y: 0; width: 200; height: 200
Popup {
y: parent.bottom
width: 200
height: 150
z: 1000
Rectangle {
x: 0; y: 0; width: 500; height: 200
color: "red"

The rectangle would be displayed on top of the popup even if the popup has z: 1000. Is there some way to fix it other than defining a big z index for all the ancestors of the popup?

I would like the popup to disappear when I click anywhere outside of the popup, like a normal QWidget popup would do. I have tried using a huge MouseArea that covers the whole screen with a big z number but it has the same problem: it works for items that are defined earlier but it doesn't for items defined later.

Added after 1 41 minutes:

Ok, I made it! I reparent the popup to the top-level item. This way it always stays on top of other items and both issues get solved.

Component.onCompleted: {
// Reparent the popup to the top-level item so that it always stays on top of all other items
var topLevel = popup
while(topLevel.parent) {
topLevel = topLevel.parent
var coordinates = popup.mapToItem(topLevel, 0, 0)
popup.parent = topLevel
popup.x = coordinates.x
popup.y = coordinates.y