Adobe Flex : Popup dialog not sizing correctly - apache-flex

Question

I have a popup dialog that is an mx:TitleWindow. The rendered height of the dialog is too large however, see the whitespace at the bottom. Decreasing the height by x pixels seems to have no effect. How do I get it to size correctly?
<mx:TitleWindow 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="356" height="322"
layout="vertical" showCloseButton="true" close="cancel(event)"
title="Add User" creationComplete="usernameTF.setFocus();"
hasFocusableChildren="true">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.adobe.crypto.SHA1;
import com.hurlant.crypto.hash.SHA1;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
[Bindable]
public var mainApp:Object = null;
protected function apply_clickHandler(event:MouseEvent):void {
if (usernameTF.text == null || usernameTF.text.length < 1) {
usernameTF.errorString = "The username is mandatory";
width = 520;
return;
}
else if (mainApp.userExists(usernameTF.text)) {
usernameTF.errorString = "Username already exists";
width = 520;
return;
}
else {
usernameTF.errorString = "";
}
if (passwordTF.text == null || passwordTF.text.length < 1) {
passwordTF.errorString = "The password is mandatory";
width = 520;
return;
}
else {
passwordTF.errorString = "";
}
if (confirmTF.text == null || confirmTF.text.length < 1) {
confirmTF.errorString = "The confirmation password is mandatory";
width = 520;
return;
}
else {
confirmTF.errorString = "";
}
if (passwordTF.text != confirmTF.text) {
passwordTF.errorString = "The passwords must match";
width = 520;
return;
}
else {
passwordTF.errorString = "";
}
var u:Object = new Object();
u.username = usernameTF.text;
u.password = com.adobe.crypto.SHA1.hash(passwordTF.text);
u.accesslevel = accessLevelCB.selectedItem;
mainApp.addUserToModel(u);
mainApp.applyHandler(null);
}
protected function cancel(event:Event):void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<s:Form height="280" defaultButton="{apply}">
<s:layout>
<s:FormLayout gap="{Globals.FORM_GAP}"/>
</s:layout>
<s:FormHeading label="Add User"/>
<s:FormItem label="Username:">
<s:TextInput id="usernameTF" restrict="0-9A-Za-z_." maxChars="127"/>
</s:FormItem>
<s:FormItem label="Password:">
<s:TextInput maxChars="127" id="passwordTF" displayAsPassword="true"/>
</s:FormItem>
<s:FormItem label="Confirm Password:">
<s:TextInput maxChars="127" id="confirmTF" displayAsPassword="true"/>
</s:FormItem>
<s:FormItem label="Access Level:">
<s:ComboBox id="accessLevelCB" selectedIndex="0">
<s:dataProvider>
<mx:ArrayList>
<fx:String>user</fx:String>
<fx:String>admin</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
</s:FormItem>
<s:FormItem>
<s:HGroup>
<s:Button id="apply" label="Apply" click="apply_clickHandler(event)" />
<s:Spacer width="3"/>
<s:Button label="Cancel" click="cancel(event)"/>
</s:HGroup>
</s:FormItem>
</s:Form>

Answer 1

Decreasing the height by x pixels
Which height are you decreasing?
<mx:TitleWindow 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="356" height="322"
layout="vertical" showCloseButton="true" close="cancel(event)"
title="Add User" creationComplete="usernameTF.setFocus();"
hasFocusableChildren="true">
<s:Form height="280" defaultButton="{apply}">
In the code you show I would expect the height of the box to be 322. The form would be 280; which leaves ~42 pixels of whitespace at the bottom.