6 Replies Latest reply on Mar 15, 2011 12:38 PM by JoshBeall

    "Floating" content left or right--can you do this in Flex?

    JoshBeall Level 1

      Hi All,

       

      I've got some content that I'd like to lay out top-to-bottom.  I've been using a VGroup to arrange each of the components, and it's worked just great.

       

      However, now I want to add a component that is "right floated" (to use HTML terminology) inside the VGroup.  In other words, something like this crude illustration:

       

      +------------------------------------------------------+
      | Lorem ipsum dolor sit amet,                          |
      | consectetur adipiscing elit. Duis  +---------------+ |
      | quis lacus dolor. Cras adipiscing  | Here is a     | |
      | convallis libero vel mollis.       | component     | |
      | Aliquam pulvinar molestie tortor   | that is       | |
      | vel dictum. Fusce molestie         | right floated | |
      | laoreet arcu commodo vulputate.    | The main      | |
      | Donec varius laoreet placerat.     | flow, to the  | |
      | Fusce sed est dolor. Nam           | left, flows   | |
      | elementum vulputate nibh,          | around this.  | |
      | facilisis tristique eros iaculis   +---------------+ |
      | ac. Integer vel nunc ligula.                         |
      | In egestas tortor sem. Aliquam erat volutpat.        |
      |                                                      |
      | Ut ac felis et mauris sagittis porta. Donec et lorem |
      | sed nisi dignissim adipiscing pellentesque sed dui.  |
      | Vestibulum aliquet interdum nibh nec consequat.      |
      | Suspendisse felis elit, lacinia vitae consectetur    |
      | vitae, mattis a nulla. Praesent in lobortis neque.   |
      | Vestibulum ante ipsum primis in faucibus orci luctus |
      | et ultrices posuere cubilia Curae; Nullam ac enim    |
      | ante.                                                |
      +------------------------------------------------------+
      

       

      You can see that there is a box (perhaps a Spark Panel component) that's "floated" over on the righthand side, and all the components (just text in this crude example) flows around it, on the lefthand side, and then underneath the "floating" panel, it takes up the entire content width.

       

      How would I replicate this layout in Flex?  Do I have to use BasicLayout and give everything absolute positions?  I am hoping to avoid that, because I've got components in the main flow that have variable heights--depending on data returned by the server, they might have a short block of text, or it might be longer.  Also, depending on user interaction, additional controls (e.g., a textbox labeled "please explain here") will appear in the main flow.  All of this will affect the height of the components, and thus the x address of the component that changed, and every component that's below it, should also change.

       

      If I'm using BasicLayout, I have no idea how I would keep things from getting insanely crazy trying to reposition everything and accounting for every possible  scenario.  If I just use VerticalLayout, then everything works perfectly.  So, can I use VerticalLayout for the main flow and yet somehow still get a panel "right floated"?