Pinning and Unpinning 

You can fix the position of a component on an area by pinning it. When you drag a component or layout in from the palette it is automatically pinned. (See the table above for all pinned/unpinned).

Unpinned

When you drag in an unpinned component, PhixFlow automatically puts it in in the next space available. By default, this is underneath the previous component. However, you can control the flow using CSS properties. Components in forms are represented as DIV objects. 

You can drag unpinned components around in their parent component, and PhixFlow puts them wherever you drop them.

You can also manually control the order of unpinned components by editing the Order field in the details of the component. This is found in the Positional Settings section of the details. The video above gives an example of using both of these methods - dragging, and manual update.

Pinned

Pinned components can be placed anywhere on an area and you can drag pinned components to any position on a screen.

You can pin the edges of the component to its parent component using the Positional Settings in the component's details. To do this, set the offsets between the top, right, bottom and left edges of the component to those of the parent. The offsets are in number of pixels between the edge of the component and the edge of the parent. 

Switching Between Unpinned and Pinned

Pinned components can be dragged over unpinned components, so be careful when mixing pinned and unpinned components on a form. Think of these as being laid out in two separate, overlapping layers on the screen.

To change an unpinned component to pinned, press Ctrl and drag it.

To unpin a pinned component, right-click on it and select Unpin Selected Objects. You can select several components at once, and unpin them all using this option. The components will move into the next available space in their respective parent components.