setting z-index upon a panel?

[9tontruck]

Hi,

I am making a custom color picker component. Simply, when the user clicks a color box, color palettet should pops up over all other components.

This is my color palette panel:

        <s:Panel width="111" height="215" id="colorPalette"

                 y="18"

                 backgroundColor="0x333333"

                 visible="false"

                 includeInLayout="false"

                 skinClass="com.storefront.image_module.uicomponents.HeaderlessPanelSkin"

                >

            <s:layout>

                <s:TileLayout paddingTop="5" paddingLeft="5" />

            </s:layout>

        </s:Panel>

But everytime I set it's visible=true , it goes unerneath of other components. To fix this problem, I tried several ways I can think of but none of them worked.

What is the best way to make the panel appear over all other components? Im looking for something similar to "z-index" in css

[Ned Murphy]

You can use the addChild() method to bring an object to the top of the display list.

[9tontruck]

I have tried that way too. But it didn't work because the panel's perent component also has next componets so there still exists over-standing components

[Ned Murphy]

Then you probably need to change the parenting for the panel.  Maybe you could temporarily reparent it to the main timeline then back again when it is dismissed.

[9tontruck]

Thanks for the reply. But temporary reparenting doesn't sound the perfect solution to me as this custom component is to be used by other developers as well.

Is there any other existing popup component that I can use instead of panel?

[9tontruck]

So reparenting is the only way to make a proper popup component in Flex?

[9tontruck · Accepted solution]

I found a solution.

I warpped the panel with PopUpAnchor and it works exactly what I wanted.

Thanks for the advice Ned

[Ned Murphy]

You're welcome