Subscribe to RSS
get email updates
home | about | pixDif AIR app | video tutorials
polyGeek.com

Register for 360Flex in DC using the ad below and you will automatically be entered in a drawing for a free ticket. Read more.
place your ad here

Web Premium





Layout problems with a rotated Label component

December 18th, 2008 . by polygeek
view source

I’m having a problem getting an <HBox> to layout a rotated <Label>

I’ve tried all sorts of combinations of maxWidth/Height, measuredWidth/Height with no luck. I’d appreciate it if you would comment with an explanation or point me to a resource that explains how this can be fixed.

Here’s the gist of the code below or you can view source to see everything.

<mx:HBox x="20">
<mx:Label text="First Label" rotation="90" />
<mx:Label text="Second Label" rotation="90" />
<mx:Label text="Third Label" rotation="90" />
</mx:HBox>

Here’s a similar version with borderStyles set to inset so that you can see the containers. In this example I put each Label inside an HBox and rotated the HBox.

view source

If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


similar posts

5 Responses to “Layout problems with a rotated Label component”


comment number 1 by: Mister

I assume you wanted them lined up horizontally next to each other but vertically, hehe if that maks any sense.

What about something like this:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

backgroundColor="0xFFFFFF"

width="310" height="250"

borderStyle="inset"

layout="absolute" viewSourceURL="srcview_b/index.html">

<mx:Style>

@font-face{

src: local("Arial");

fontFamily: "embededFont";

}

Label {

font-family: embededFont;

}

</mx:Style>

<mx:Script>

<![CDATA[

private function rotateHBox():void

{

hboxRotate.rotation = 90;

hboxRotate.x = hboxRotate.height;

}

]]>

</mx:Script>

<mx:HBox id="hboxRotate" creationComplete="rotateHBox()"

x="20" backgroundColor="0×555555"

borderStyle="inset">

<mx:HBox id="hbox1"

borderStyle="inset">

<mx:Label

text="First Label" />

</mx:HBox>

<mx:HBox id="hbox2"

borderStyle="inset">

<mx:Label

text="Second Label that is very long" />

</mx:HBox>

<mx:HBox id="hbox3"

borderStyle="inset">

<mx:Label

text="Third Label"/>

</mx:HBox>

</mx:HBox>

</mx:Application>

comment number 2 by: jjd

Is this what you're looking for? I am simply rotating a VBox by 90 degrees in the other direction (270):

<mx:VBox rotation="270" x="690" y="215">

<mx:Label text="First Label" />

<mx:Label text="Second Label" />

<mx:Label text="Third Label" />

</mx:VBox>

comment number 3 by: Jassa

Just try adding some 'paddingTop' to each of the Labels. E.g:

<mx:HBox x="10" y="10" width="400" height="150">

<mx:Label text="First Longer Label" rotation="90" x="0" y="0" paddingTop="-30" />

<mx:Label text="Second Label" rotation="90" x="0" y="0" paddingTop="40" />

<mx:Label text="Third Label" rotation="90" width="87" height="55" x="0" y="0" paddingTop="90" />

</mx:HBox>

Requires a bit of tweaking depending on the text in the label but could probably be done dynamically with a little actionscript.

comment number 4 by: polyGeek

@Mister, You know, I should have made an image, or used Canvas, to show exactly what I was looking for. I'd like them to all show up in their current layout but right next to each other – no horizontal space between them.

@jjd, Good thinking. That will work. It isn't a perfect solution because in my design not everything in the container is rotated but I can work around that. Thanks.

comment number 5 by: Mister

Yeah, I figured that is what you meant, but I was wondering why you were using an HBox then, but glad someone figured it out ;).

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud