Adobe Flex Show Content inside Rectangle (itemRenderer) - css

Question

I have a simple question, but at first I describe the scenario:
Just wrote my first ItemRenderer for testing suppose. I got a userlist view in my application and declared some objects in a dataprovider on it. On the itemRenderer, I want to display each object (user with name and an icon) inside of a rectangle in a TileGroup. My problem is now, that the rectangle is displayed next to the (user-)objects and not around it and component declarations inside the rectangle are not allowed.
This is the code of my itemRenderer:
<s:TileGroup requestedColumnCount="4" requestedRowCount="1">
<s:Rect id="infoRect" width="100%" height="100%" left="0" right="0">
<s:stroke>
<s:SolidColorStroke color="0xFFFFFF" weight="1" />
</s:stroke>
<s:fill>
<s:SolidColor color="white" />
</s:fill>
</s:Rect>
<s:VGroup width="100%" height="100%">
<s:Label id="labelName" text="Name: {data.Name}"
color="red" />
<s:Label id="labelVerbindung" text="Verbindung: {data.Verbindung}"
color="red" />
<s:BitmapImage id="labelIcon" source="{data.Icon}" />
</s:VGroup>
</s:TileGroup>
As workaround I tried to use simple CSS and gave the VGroup the following attributes styleName=".borderClass", but also that showed no effect:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.borderClass {
border-style: solid;
border-width: 3px;
border-color: red;
}
</fx:Style>
Any recommendations on how to solve this?

Answer 1

Okay, I am simply stupid... just used a BorderContainer instead of a Rectangle and it works perfectly fine.