Why do children of my popup panel appear outside of the panel - apache-flex

Question

I am using the flex 4 popup manager to popup a panel, but the children of the panel are not staying inside the panel. But when i close the popup the children are being removed.
Like this: (sorry i can't post pics)
----------
l________l
l l
..... please enterl
l--------1
Anybody know why? Here's my code:
var forgotPopup:Panel = PopUpManager.createPopUp(this, forgottenForm, true) as Panel;
PopUpManager.centerPopUp(forgotPopup);
And here's what i'm popping up:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form horizontalCenter="0" verticalCenter="0">
<mx:FormHeading label="Please enter your e-mail address and your login details will be e-mailed to you"/>
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
Any help on this would be brilliant, thanks.

Answer 1

Try to use the following:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form left="10" right="10" top="10" bottom="10">
<mx:FormHeading label="Please enter your e-mail address and your login details will be e-mailed to you"/>
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
If you need to have header word wrapped you should reject standard FormHeading and replace it with Label:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form left="10" right="10" top="10" bottom="10">
<s:Label width="100%" text="Please enter your e-mail address and your login details will be e-mailed to you" fontWeight="bold" />
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
But the best way is to switch to Spark Form which is available since Flex 4.5.

Answer 2

Please Avoid X and Y position
this might also cause the Objects Positions.