Flex 4.6 CSS vgroup "gap" ignored

Question

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"     
           >
    <fx:Style>    
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|VGroup {
            gap: 150;
            left: 30;
        }
    </fx:Style>
    <s:VGroup>
        <s:Label text="text1" />
        <s:Label text="text1" />
    </s:VGroup>
</s:Application>

The VGroup is 30 Pixel from left, as assumed (this is my proof that the style is used) But it ignores the given gap. When i feed 'gap="150"' directly into the VGroup-Element, it works. So why is this ignored when coming over css?

thank you for any hint.

cu, Markus

Answer 1

Because gap is a 'property' of the VGroup class, not a style. This property is but a wrapper for the VerticalLayout#gap property.

If you use FlashBuilder, you can see the difference between the two in the suggestion list. A property is represented as a green circle. A style is shown as a blue 'Tetris block' shape.

edit Left is also a property but still it does get applied. The reason for this is that in older releases of the Flex SDK baseline, top, bottom, left, right, horizontalCenter and verticalCenter where implemented as styles. So the reason you can still use them as such is backwards compatibility.