Set Flex container layout padding with CSS

Question

Is there any way to use Flex CSS to set the padding on this BorderContainer?

<s:BorderContainer width="100%" height="100%">
   <s:layout>
      <s:VerticalLayout />
   </s:layout>

   <s:Label text="asdfasdf" />
</s:BorderContainer>

I'm trying to avoid adding an extra unnecessary VGroup. Setting the padding with CSS has no effect. (I'm guessing since paddingLeft isn't a defined style on BorderContainer.)

s|BorderContainer {
   paddingLeft: 10;
}

Is there any way to modify properties of the layout with CSS? I don't want to have to hard code padding in a ton of places.

Answer 1

You can add a custom style to the skin of your BorderContainer. Something like this:

override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void {
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var paddingLeft:* = getStyle('paddingLeft');

    elementToPad.left = paddingLeft;
    //or
    layoutToPad.paddingLeft = paddingLeft;
    //or
    elementToPad.setStyle('paddingLeft', paddingLeft);
    //depending on what kind of element you wish to pad
}

That way you can have different paddings applied through CSS, using a single Skin class and you can avoid code duplication.
Only downside is: you won't get IDE support because the host component won't know about the style you added; and the compiler will throw an error if you try to set the style in MXML, but that's what you were trying to avoid in the first place.