Self-directed layout

A child component with a self-directed layout has a position relative to the parent. You can place such a child component anywhere inside or outside the parent component, but the child's position will always be relative to the top, bottom, left, and right edges of the parent.

You can change the position of a child component by dragging it with the mouse or by defining its position in the child component's properties.

In the Layout area, on the self-directed tab of a component's properties panel, you can see the component's current position relative to the parent.

You can quickly move a child component to a predefined position inside the parent by using the arrow buttons around the area showing the component's current position.

To set a self-directed child component flush with the parent's top, bottom, left, and right edges and lock the child so that when the parent's size changes the child's size changes accordingly:

1. In Layout, on the self-directed tab, enable all the edges by clicking on .

2. Set all the four values to 0px.

3. Lock the child component.