2 Replies Latest reply on Jan 28, 2010 8:46 AM by allanjard

    Relative positioning for top/left

    allanjard Level 1

      Hello all,

       

      I've got a somewhat confusing problem when using relative positioning for a display elements top or left attribute. If I set the top/left attribute using an absolute value then it works as expected, but I'd like to use a relative value so it will resize as needed.

       

      I think in this case a picture plus a touch of code is worth a thousand words!:

      http://sprymedia.co.uk/media/misc/flex/flex_layout.png

       

      Here the image on the left has the 'top' for the green rectangle set to 50% - but as can be seen, it is positioned as if the value were zero. The image on the right however is what would be expected, and this is achieved by setting top="150" (the component as a whole is 300x300).

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group
           xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/halo" 
      >
           <!-- background - yellow -->
           <s:Rect id="yellow" top="0%" left="0%" width="100%" height="100%">
                <s:fill>
                     <s:SolidColor color="0xFFF000" />
                </s:fill>
           </s:Rect>
           
           <!-- rect 1 - red -->
           <s:Rect id="red" top="0" left="0" width="25%" height="25%">
                <s:fill>
                     <s:SolidColor color="0xFF0000" />
                </s:fill>
           </s:Rect>
           
           <!-- rect 2 - green -->
           <s:Rect id="green" top="50%" left="0" width="25%" height="25%">
                <s:fill>
                     <s:SolidColor color="0x00FF00" />
                </s:fill>
           </s:Rect>
           
           <!-- rect 2 - blue -->
           <s:Rect id="blue" top="0" left="150" width="25%" height="25%">
                <s:fill>
                     <s:SolidColor color="0x0000FF" />
                </s:fill>
           </s:Rect>
      </s:Group>
      

       

      I suspect it's just something I'm not understanding Flex layout - can we not use relative positioning for top/left? grep-ing through the Spark skins in the distribution, I don't see any using this kind of positioning - it's all absolute (using top, bottom, left and right), but this doesn't quite work for me in the case I'm aiming for (a 4x4 grid).

       

      The other odd thing from the pictures and code is that the three "inner" rectangles all have the same width/height (25%), but that is not the case when drawn - it's 25% of the remaining space available... This is no doubt working as expected, but it comes as a little bit of a shock to the system with my HTML/CSS background :-)

       

      Thanks in advance for any help that can be offered!

       

      Regards,

      Allan

        • 1. Re: Relative positioning for top/left
          Gregory Lafrance Level 6

          As I think your have come to understand, I don't think you can use percentages with top, left, etc.

           

          You can probably do this programmatically, though that is a bit messy. For example if you want the top of a component at the center of the container, you can set its top to (this.height/2) - myComp.height/2.

           

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          • 2. Re: Relative positioning for top/left
            allanjard Level 1

            Hi Greg,

             

            Thanks for your reply. Indeed you are correct - thank you. In fact I should have read the documentation closer which says "Top: The vertical distance in pixels from the top edge". A bit frustrating that we can't use relative positioning - but that's the way it is. It looks like there isn't any validation at all on the top/left attributes, as I can set it to "qwerty" (etc) and neither mxmlc nor Flash Player will complain...

             

            I'll look at doing what I need using calculations instead - thanks!

             

            Allan