views:

2159

answers:

2

Hello guys.

I experimenting with Flex Styling, and i came across a alignment issue.

I have two image components inside a HBox, and the HBox inside a Canvas, which in turn is inside the main Application.

<mx:Canvas id="Navigation"
 horizontalCenter="0"
 bottom="0"
 left="0"
 right="0"
 visible="true"
 height="40"
 styleName="transparent">

 <mx:HBox 
  styleName="ControlContainer"
  horizontalCenter="0"
  width="150">

  <mx:Image id="left"
   source="@Embed(source='left.png')"
   left="0"/>

  <mx:Image id="right"
   source="@Embed(source='right.png')"
   right="0"/>
 </mx:HBox>
</mx:Canvas>

Custom CSS:

 .transparent {
  backgroundAlpha: 0.7;
  background-color: white;
 }
 .ControlContainer {

 }

Well as you see the i gave the Canvas a with background, and a bit transparency.

But the then there is a HBox, with 150px width, and two images inside him, each image is 40x40, so in this case the HBox would be 150x40 which is nice for what I'm trying to do.

But both images are side by side, and i want the left image aligned to the left side of the HBox, and the right image to the right side.

I've tried text-align but nothing, my guess is that Flex CSS doesn't behave the same way as CSS focused to HTML.

So how can i do that?

PS: If someone knows some good websites about Flex Styling, Flex CSS or Flex customization, would be great if you leave me a few links in comment.

+1  A: 

You can try these websites

http://www.adobe.com/devnet/flex/quickstart/styling%5Fcomponents/

http://www.loscavio.com/downloads/blog/flex3%5Fcss%5Flist/flex3%5Fcss%5Flist.htm

I have not had much experience with CSS Styling in Flex i would usually just tell the HBox HorizontalAlign="left" etc

I am not sure you will be able to align two different images in two different directions inside the same HBox

I would recommend adding two Hbox's both 100% height and 50% width each and align them separate.

medoix
The first link i already knew, the second didn't and its VERY useful. But about the Hbox's problem.. 100% 50% would do but. The right image wouldn't still be aligned to the right.
Fábio Antunes
The solution is simple... I only had to add this <mx:Spacer width="100%"/> between each image component.
Fábio Antunes
Ups. I also forgot to say. Thanks for your help.
Fábio Antunes
haha that is a very simple solutions and i am a bit embarrassed i didn't think of it! good work and you are welcome :)
medoix
The point of the HBox is that it ignores your position styles. Either use a Canvas and specify left|right or x|y, or use a mx:Spacer with 100% width between the two images.
Glenn
+3  A: 

Spacer tags are useful in situations like these. If you insert one in-between the two images, you can push them to edges of the HBox. While setting the spacer's width to 100% would seem to indicate that it's going to take up the entire box, this won't be the case as the images' widths will be set to an absolute value as soon as their content has loaded. The spacer will then take up 100% of the remaining width.

    <mx:HBox 
            styleName="ControlContainer"
            horizontalCenter="0"
            width="150">

            <mx:Image id="left"
                    source="@Embed(source='left.png')"
                    left="0"/>

            <mx:Spacer width="100%"/>

            <mx:Image id="right"
                    source="@Embed(source='right.png')"
                    right="0"/>
    </mx:HBox>
Stiggler
This is by far the easiest MXML way to do this. Otherwise, turf the HBox and layout the canvas manually in AS3.
Glenn
Thanks. I was just posting the solution in the moment you post your answer. And yes a simple spacer would do the trick.
Fábio Antunes