Moving Content on a Screen

Owned by Anthony George
Last updated: Sept 12, 2024 by Zoe Baldwin
3 min read

Moving Content

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

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. 

Copying Components

Right-click components in the  Layers and select   Copy Component to duplicate a component and create a sibling.

Ctrl+drag can also be used to place a copy wherever the drag is dropped.

Note: Components can also be copied in the  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.