1 Reply Latest reply on Aug 18, 2006 2:27 PM by peterent

    % Relative placement of components

    Level 7
      I have a large DataGrid that takes the top 80% of the Canvas that am

      I want to place two smaller items below it (at about 90% of the height of
      the Canvas).

      However, I am finding that only width, and height can be specified in

      Absolute position does not work well in this case, since the entire Canvas
      needs to scale relative to it's container.

      Layout constraints also seem to be in absolute pixels.

      Ideally, I would like the constraint editor to be able to specify
      constraints relative to other compentents embedded in the overall container.
      Right now, one can only specify placement relative the walls of the
      container component. (this would allow relative gap spacing, etc.).

      Dr. Yechezkal Gutfreund
      ACE for Mobile Devices

        • 1. Re: % Relative placement of components
          peterent Level 2
          Using 80% of the Canvas for the DataGrid will leave little room for anything else unless the Canvas is very tall.. You could try adding a <mx:Spacer height="10%" between the DataGrid and the smaller items. You might in fact, set the height of the Spacer to be 100% so that it fills whatever room is left between the DataGrid and the items below it.

          Personally, I think you should try using the positioning styles. While they do give you absolute margins, they also allow the component to grow and shrink with the space.

          For example, if you can live with 20 pixel margins on the top, left, and right sides of the DataGrid, and want to leave 50 pixels at the bottom for the other items, then do:

          <mx:DataGrid left="20" right="20" top="20" bottom="50" ... >

          Now the DataGrid will grow and shrink as its container changes, but it will always have those margins; using percentages will not and may cause controls to overlap each other.

          <mx:HBox left="20" right="20" bottom="10" horizontalAlign="centr">
          <!-- small items in here -->

          This will always make the HBox and its contents hug the bottom of the Canvas.