Moving Content on a Screen

Owned by Anthony George
Last updated: Jul 24, 2024
3 min read

Version 11+

To Move a Component

  1. Drag it to the desired location, this can be done either in the  Layers section or on the screen Screen itself.
  2. A red line in the Layers section indicates where the item will be placed.
    1. To drop an item inside another component, hover over the right portion of the components to make it open.

Component Layout

The location that PhixFlow places components on the screen canvas depends on whether the container is configured to flow in rows or columns; see Sizing and Positioning Screen Content. For example, if a container is set to flow:

  • in rows, PhixFlow puts a component on the right
  • in columns, PhixFlow puts a component below

Version 10 and Earlier

 Click here to expand...

The following video shows you how to move components around in the  Layers panel and on the canvas in PhixFlow Version 10 and earlier.

Preventing Dragging

To prevent accidental dragging of components on the screen, go to the components properties → Positional Settings section, and tick Prevent Dragging.

This will make items non-draggable on a screen, but they will remain draggable in the Layers and Repository. 

Special Cases

When the following options are set the drag-drop behaviour is affected.

NameDescriptionExample
Prevent Dragging

To stop a component from being draggable on the screen canvas, in Component properties →  Styles tab → Position Settings → tick Prevent Dragging.

You can still move the component within the Layers panel.

Use Prevent Dragging to fix the header within the container so it cannot be accidentally moved from the top.

 

Composite Component

To create a grouped layout the moves as a single component, in Component properties →  Properties tab → Advanced → tick Composite Component.

For information about creating and changing composite components, see Using Composite Components.

When you drag an attribute onto the screen canvas, PhixFlow creates a Composite Component, consisting of a label and a field. This component cannot be broken apart while it remains a Composite Component.

Preferred Parent

Serene Grey palette components and layouts are configured with a preferred parent. When you drag a component on to the screen canvas, PhixFlow recognises a parent component and automatically puts the child component inside it.

To configure a component as a preferred parent, use Component properties →  Properties tab → Parent Details:

The screenshot below shows a tile from the palette being dropped onto the canvas. PhixFlow highlights the preferred parent component with a blue outline to show this component can be a tile container. The cursor appears as a green circle with an arrow, to indicate you can drop the component here.

Pinned

On the canvas, right-click a component to show its popup menu and select 

 Pin/Unpin Selected Objects. Pinned objects have an absolute position and move where they are dragged.