Positioning / Scrolling problem with Flex popup.

Question

Hi all,

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

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!