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.

I'm not sure what you're trying to avoid. If you want to reuse a certain layout, create a custom skin for BorderContainer. If it's just a one-off, I don't see why you wouldn't "hard code" it. paddingLeft is a property of LayoutBase, not a style. — RIAstar
@RIAstar We're already using a custom skin for BorderContainer throughout the application, but there are several different uses of it that require different padding. All of these similar uses should have the same padding so I figured that was a good case for using CSS. If I put the padding in the skin I have to make 3 similar skins that only differ on their Layout. If I put the padding/layout in each place I use BorderContainer, it becomes hard to change the padding across the application in the future. — takteek
In that case, adding a custom style to your custom skin should do the trick. Only downside is: you wouldn't get IDE support because the host component wouldn't know about the style you added; and the compiler would throw an error if you tried to set the style in MXML, but that's what you were trying to avoid in the first place. — RIAstar
@RIAstar It looks like that's the best idea. If you submit that as an answer I'll accept it. — takteek

RIAstar RIAstar · Accepted Answer · 2012-12-20T21:49:32

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.

Set Flex container layout padding with CSS

2 Answers