mx:Application in Flex 4 Gumbo (beta 2) has padding around the border, I do not want any padding

Question

When I make a new Flex application in Flex 4 beta 2 (Flash Builder), then it creates a border around the outside of the Panel in this example of a thick width. It places a border with a shadow on the bottom and on left and right but not top. I want NO BORDER please.

I must use mx:Application because of some older Flex 3 libraries which require it, cannot use spark.

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">

Answer 1

Hey,

The mx.core.Application differs in a few ways from the new spark.components.Application. It seems that the mx.core.Application has an inheritedStyle for the paddings of 24. A quick mx.utils.ObjectUtil.toString() of the Application's inheritingStyles shows that. Spark Applications have no padding.

If you set the padding(left|right|top|bottom) to 0, the first part is solved.

The PanelSkin also has a DropShadow applied to it. This is not included in the padding calculations, so if you just copy-paste the PanelSkin and remove the drop shadow part, that'll be fixed.

Here's the code for the app...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
    creationComplete="{create()}">
    <fx:Script>
     <![CDATA[
      import mx.utils.ObjectUtil;
      public function create():void
      {
       var styles:Object = this.inheritingStyles;
       trace(ObjectUtil.toString(styles)); 
      }
     ]]>
    </fx:Script>
    <mx:Panel width="100%" height="100%" includeInLayout="true">
     <mx:Label text="test"/>
    </mx:Panel>
</mx:Application>

Hope that helps. Good luck.