Positioning / Scrolling problem with Flex popup

Question

I\'m trying to work out a specific problem I\'m having with positioning in Flex using the PopUpManager. Basically I\'m wanting to create a popup which will scroll with the paren

Answer 1

PopUpManager adds another layer which is independent of the original Application.
So you probably don't want to use PopUpManager if you want it to stay relative to the first layer. You can just use a TitleWindow on top of a Canvas.

You might have had this:

<mx:Application creationComplete="createPopup()">
    <mx:Script>
        <![CDATA[
            public var popupPanel:TitleWindow = new TitleWindow();

            private function createPopup():void
            {
                PopUpManager.addPopUp(popupPanel, myApp, true);
                PopUpManager.centerPopUp(popupPanel);
            }
        ]]>
    </mx:Script>

    <mx:Canvas id="myApp" width="100%" height="2000" />
</mx:Application>

But instead you will want to try something like this:

<mx:Application creationComplete="createPopup()">
    <mx:Script>
        <![CDATA[
            public var popupPanel:TitleWindow = new TitleWindow();

            private function createPopup():void
            {
                // Assuming MyApplication extends Canvas
                (myApp as Canvas).addChild(popupPanel);
                popupPanel.x = myApp.width/2;
                popupPanel.y = myApp.height/2;
            }
        ]]>
    </mx:Script>

    <mx:Canvas id="myApp" width="100%" height="2000" />
</mx:Application>

You will need to decide for yourself what the best x,y values are for your application.

If you also want to make this TitleWindow draggable/moveable, then you can do so with the Sprite.startDrag() function.

Let me know if this helps!

Answer 2

You are calling "centerPopup" which will defeat the 2nd argument in addPopup. According to the Adobe docs, centerPopup "centers a popup window over whatever window was used in the call to the createPopUp() or addPopUp() method."

Answer 3

Found this post when searching the same problem in Google. I found two solutions on another site. Here they are:

In the first solution ... a listener is added to react to the scroll event of the VBox which repositions the popup and additionally detects when the popup moves outside the bounds of the VBox, toggling it’s visibility to make it appear to “tuck under” the VBox as it’s spawning parent scrolls out of view.

Full Article and Code

The second solution is cleaner:

Basically, I overlay a canvas on top of my VBox and “addChild” popup components to the canvas (NOT using popupmanager) and scroll the canvas along with the VBox. Setting the isPopup property of the popup component allows me to drag the component around like you can a true popup.

Full Article and Code