This topic covers the various means by which you can position and size elements in your layouts.

First, it is important to note that all numeric size and position values are denominated in pixels.

There are two different positioning situations: positioning within an absolute-position container and a relative-position container.

Using Elements within Absolute-Position Containers

Several containers implement absolute positioning.    These include the Canvas and HoverCanvas containers, as well as the raw layout-view containers themselves (which are Canvas instances).    In other words, when you drag a component directly onto the blank design area stage, it will be absolutely positioned.    Note that all box containers (e.g. HBox, VBox, HFlowBox), the Panel, and TabNavigator do NOT implement absolute positioning; they use relative positioning.    Absolute-position containers position each child in isolation without taking into account any of the other children.

Within absolute-position containers, you can use a combination of the following:

• Constraint dimensions - The left, right, top and bottom constraint properties can be used to anchor each side of a component to the corresponding edge of a container.    The edges of the component stay a constant distance from the corresponding container edges, regardless of the container size.    For example, you can specify a left value to lock the element to the left size of the container, and/or specify a right value to lock the element to the right edge of the container; these constraints will remain in effect even if the container changes size.    If you specify constraints for both aspects of a given dimension (e.g. both left and right, or both top and bottom), the width or height will automatically be determined based on the space needed to be filled.    Center-based constraints can also be used, positioning an element relative to the horizontal and/or vertical center of the parent container; this is done through the horizontalCenter and verticalCenter values.    Because of the flexibility afforded when making changes later on, constraints are the best way to position and size elements.
• X/Y Coordinates - Similar to left and top values, x and y coordinates allow positioning of an element relative to the upper-left corner of the container.
• Element Dimensions - Explicit width and height values can be used, or you can allow the default element dimensions be used (default dimensions exist for most elements).    Note that if both left and right constraint values are specified, this will function as a width value and override any explicit or default width setting.    In the same way, specifying both top and bottom constraint values will override any height value.    Supported values include numeric pixel values and percentage values (e.g. 100%).    If percentage-based dimensions exceed the boundaries of the parent container at runtime, they are automatically adjusted so that the element only goes up to (but not past) the edge of the container.

The following diagram illustrates the concept of constraint dimensions:

All positioning and sizing of elements in the wizard takes place in the Size / Positioning section of the Properties Panel.    The section appears as follows for an element inside an absolute-position container:

The following diagram notes each of the constraint controls:

If you want to convert the current position into an edge-relative position without any math, just check the appropriate checkboxes.    If, on the other hand, you know the exact pixel offsets you want, you can enter them directly in the corresponding offset boxes.

At the moment, only the x/y and width/height values are set on the example element shown in the diagram above.  This makes the element 250x100 px, positioned at (50, 50).    Suppose you wanted to anchor the example element above so that each of its sides where always 50 pixels from each edge.    To do this, you would enter 50 in the top, bottom, left, and right offset fields.    This automatically checks the corresponding anchor checkboxes:

Establishing these constraints would override any existing widht/height values which had been set.    On the other hand, suppose you wanted the element to be 200 x 100 px, and always centered both vertically and horizontally.    In this case, you would set the following:

Note: As you make changes, they are reflected in the Design Area.

Note: Removing the width or height values applied to an element makes the element revert to using its default dimensions if no dimension constraints are in effect.

Using Elements within Relative-Position Containers

There are several layout containers which can be added to your layout that implement relative positioning.    The most common of these are the box classes - HBox, VBox, HDividedBox and VDividedBox.    Relative-position containers position each of their child components adjacent to each other based on the size of all children.

Within relative-position containers, only Element Dimensions can be used.    All positioning is automatically determined by the container, based on the size and position of other sibling element(s).  Explicit width and height values can be used, or you can allow the default element dimensions be used (default dimensions exist for most elements).    Supported values include numeric pixel values and percentage values (e.g. 100%).    If percentage-based dimensions exceed the boundaries of the parent container at runtime, they are automatically adjusted so that the element only goes up to (but not past) the edge of the container.

The following diagram illustrates the concept of two different relative-position containers -- the HBox and VBox, the most commonly used containers:

All positioning and sizing of elements in the wizard takes place in the Size / Positioning section of the Properties Panel.    The section appears as follows for an element inside a relative-position container; it's simpler than the absoute-positioned counterpart:

As you can see, there are only two settings: the height and the width.    If you leave either blank, the value will be automatically determined for most elements.    Additionally, removing the existing width or height values applied to an element makes the element revert to using its default dimensions.

Resizing and Repositioning Directly in Design View

In the wizard, you can also resize and reposition automatically by dragging.    To reposition an element, click and drag in the middle of it:

A 'move' cursor will appear.    You can drag and drop elements from one container to another.    If constraint positioning or dimensions have been established for the element, these constraints will be retained and only the offset values adjusted.    On the other hand, if x/y positioning coordinates were used, these values will be updated directly.    In other words, the wizard is intelligent and won't overwrite your positioning or sizing work.

To resize an element, click it once to select it.    On each corner (and on the middle of each side), a resize handle will appear.    When you hover over one of these handles, a resize cursor will appear.    If you click and drag, the element size will be updated as appropriate.    A tooltip is shown while dragging to indicate the new effective size of the element:

As with dragging to move an element, all constraint positioning and/or constraint-based dimensions are intelligently respected and retained.