| 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 |
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>
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>
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.
@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.
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 ;).
Thanks for the blog.
Now you can simply rotate to “Back” button in mobile apps too… flex 4.5.1 mobile makes it pretty easy but z=1 was trick otherwise lable vanish after rotating to 90 degree.
<s:Button z="1" label="Back" click="backBtn_clickHandler(event)" x="0" y="0"
skinClass="spark.skins.mobile.BeveledBackButtonSkin" rotationZ="90">
@Ken, Thanks. I doubt if I would have ever thought to handle it that way.