Development

The spark StackedFormSkin is fantastic for laying out forms in a way that use a minimal amount of horizontal space, but still look nice and are a nice default look and feel for forms that you might be creating.  The downside to them is that they have an absurd amount of padding around the items (perhaps flex is expecting you to use 16pt fonts or something.)  The really unfortunate part is that the paddings are not available for modification via CSS.  In other words, if you are frustrated that you can’t set the padding on a spark Form with the StackedFormSkin (and StackedFormItemSkin) then this is the post for you!

Here’s an example of a form using the standard StackedFormSkin

Note all of the wasted space around the various components.  I have added the following, which simply adds the ability to specify the padding around the components (with the original static values as the defaults.)

StylableStackedFormSkin

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- ADOBE SYSTEMS INCORPORATED Copyright 2010 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. -->

&nbsp;
<![CDATA[         /**          * @copy spark.skins.spark.ApplicationSkin#hostComponent          */         [HostComponent("spark.components.Form")]         ]]>
<![CDATA[         [Bindable]         private var paddingLeft:Number = 10;         [Bindable]         private var paddingRight:Number = 10;         [Bindable]         private var paddingTop:Number = 10;         [Bindable]         private var paddingBottom:Number = 10;         [Bindable]         private var gap:Number = 7;         /**          *  @private          */         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void         {             updateNumberStyle('paddingLeft');             updateNumberStyle('paddingRight');             updateNumberStyle('paddingTop');             updateNumberStyle('paddingBottom');             updateNumberStyle('gap');             // Push backgroundColor and backgroundAlpha directly.             // Handle undefined backgroundColor by hiding the background object.             if (isNaN(getStyle("backgroundColor")))             {                 background.visible = false;             }             else             {                 background.visible = true;                 bgFill.color = getStyle("backgroundColor");                 bgFill.alpha = getStyle("backgroundAlpha");             }             super.updateDisplayList(unscaledWidth, unscaledHeight);         }         private function updateNumberStyle(styleName:String, internalPropertyName:String = null):void         {             if(!internalPropertyName) {                 internalPropertyName = styleName;             }             if(!isNaN(getStyle(styleName))) {                 this[internalPropertyName] = getStyle(styleName);             }         }         ]]>

<!--- Defines the appearance of the Form class's background. -->

<!--- @private -->

<!--     Note: setting the minimum size to 0 here so that changes to the host component's     size will not be thwarted by this skin part's minimum size.   This is a compromise,     more about it here: http://bugs.adobe.com/jira/browse/SDK-21143     -->

<!--- Displays the error text of the Form. -->

<!-- We set Form's showErrorTip and showErrorSkin to false, so we set them back          to true for the Form's elements -->
<!--- @copy spark.components.SkinnableContainer#contentGroup -->

StylableStackedFormItemSkin

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- ADOBE SYSTEMS INCORPORATED Copyright 2010 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. -->

&nbsp;

&nbsp;

<!-- host component -->

<![CDATA[         /**          * @copy spark.skins.spark.ApplicationSkin#hostComponent          */         [HostComponent("spark.components.FormItem")]         ]]>
<![CDATA[         [Bindable]         private var paddingLeft:Number = 10;         [Bindable]         private var paddingRight:Number = 10;         [Bindable]         private var paddingTop:Number = 10;         [Bindable]         private var paddingBottom:Number = 10;         /**          *  @private          */         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void         {             updateNumberStyle('paddingLeft');             updateNumberStyle('paddingRight');             updateNumberStyle('paddingTop');             updateNumberStyle('paddingBottom');             // Push backgroundColor and backgroundAlpha directly.             // Handle undefined backgroundColor by hiding the background object.             if (isNaN(getStyle("backgroundColor")))             {                 background.visible = false;             }             else             {                 background.visible = true;                 bgFill.color = getStyle("backgroundColor");                 bgFill.alpha = getStyle("backgroundAlpha");             }             var indicatorSource:Object;             if (currentState == "error" || currentState == "requiredAndError")                 indicatorSource = getStyle("errorIndicatorSource");             else if (currentState == "required" || "requiredAndDisabled")                 indicatorSource = getStyle("requiredIndicatorSource");             if (indicatorSource && indicatorDisplay)             {                 indicatorDisplay.source = indicatorSource;             }             super.updateDisplayList(unscaledWidth, unscaledHeight);         }         /**          *  @private          */         override public function setCurrentState(stateName:String, playTransition:Boolean=true):void         {             super.setCurrentState(stateName, playTransition);             invalidateDisplayList();         }         private function updateNumberStyle(styleName:String, internalPropertyName:String = null):void         {             if(!internalPropertyName) {                 internalPropertyName = styleName;             }             if(!isNaN(getStyle(styleName))) {                 this[internalPropertyName] = getStyle(styleName);             }         }         ]]>

<!--- The column containing the sequence label. -->

<!--- The column containing the FormItem's label and content. -->

<!--- The column containing the FormItem's help content. -->

<!--- @private -->

<!--- @private -->

<!--- Defines the appearance of the FormItem's background. -->

<!--- @private -->

<!--- @copy spark.components.FormItem#sequenceLabelDisplay -->

<!--- @copy spark.components.FormItem#labelDisplay -->

<!--- @copy spark.components.SkinnableContainer#contentGroup -->

<!--- @private -->

<!--- @copy spark.components.FormItem#helpContentGroup -->

default.css

/*Form Styling*/
s|Form {
skinClass: ClassReference("StylableStackedFormSkin");
paddingLeft: 0;
paddingRight: 0;
paddingTop: 0;
paddingBottom: 0;
gap: 0;
}
s|FormItem {
skinClass: ClassReference("StylableStackedFormItemSkin");
paddingLeft: 0;
paddingRight: 0;
paddingTop: 0;
paddingBottom: 0;
}

As you can see with the image below, the amount of space can be reduced to a much more appropriate amount for smaller font sizes.