Rotating a Label 90 degree in an Item Renderer

Question

I'm trying to rotate a label on my item renderer. When I rotate it 45 degrees, it's working just fine but when I rotate it 90 degrees, which is what I wanna do, label is rotating but after list created, rotated labels are stepping up each other.

I can select the 45 degree ones but it seems like 90 degree ones has no width at all. When I declare width and height and padding but that did not solve it too.

How can I make my labels 90 degree without making them step up each other?

My item renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" >
    <fx:Script>
        <![CDATA[
            override public function set data(value:Object):void
            {
                super.data = value;
                dateLabel.text = data.date;

            }
        ]]>
    </fx:Script>
    /* When rotation is 90, my labels are just stepping up eachother */
    <s:Label id="dateLabel" rotation="45"/>
</s:ItemRenderer>

Answer 1

The BasicLayout that your renderer is using (by default) doesn't respect the transformations that occur in the object's width/height/position/etc when you rotate it. It still tries to layout the objects as if they were not rotated.

However, if you use any other layout, like VerticalLayout or HorizontalLayout, the objects new dimensions (after rotation) are used.

I may not be explaining the above properly, but a simple solution to this problem is just to add a layout declaration to your renderer:

<s:layout>
    <s:VerticalLayout/>
</s:layout>