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 parent container - this is necessary because the parent container is large and if the user's browser window isn't large enough (this will be the case the majority of the time) - they will have to use the scrollbar of the container to scroll down. The problem is that the popup is positioned relative to another component, and it needs to stay by that component.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

  <mx:Script>
    <![CDATA[
      import mx.core.UITextField;
      import mx.containers.TitleWindow;
      import mx.managers.PopUpManager;

      private function clickeroo(event:MouseEvent):void {
        var popup:TitleWindow = new TitleWindow();
        popup.width = 250;
        popup.height = 300;

        popup.title = "Example";
        var tf:UITextField = new UITextField();
        tf.wordWrap = true;
        tf.width = popup.width - 30;
        tf.text = "This window stays put and doesn't scroll when the hbox is scrolled (even with using the hbox as parent in the addPopUp method), I need the popup to be local to the HBox.";
        popup.addChild(tf);

        PopUpManager.addPopUp(popup, hbox, false);
        PopUpManager.centerPopUp(popup);
      }
    ]]>
  </mx:Script>

  <mx:HBox width="100%" height="2000" id="hbox">
    <mx:Button label="Click Me" click="clickeroo(event)"/>
  </mx:HBox>

</mx:Application>

Could anyone give me any pointers in the right direction? Thanks.

Answer 1

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 2

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

Answer 3

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!