| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
It is possible to rearrange items on a screen to suit your design. The following video guides you through the process:shows you how to move components around in the
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
When you move a component or layout, you drag it onto another component.
- drag and drop places a component next to the component on which you drop. This creates a sibling relationship.
- shift+drag and drop places a component into the component on which you drop. This creates a parent-child relationship.
Insert excerpt
The location that PhixFlow places components on the screen canvas depends on whether the container is configured to flow in rows or columns. 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.
Moving Using the
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
To move components on the screen canvas, we recommend that you use the
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
To find a component in the Layers panel, on the screen canvas click a component to select it. PhixFlow automatically highlights it in the Layers panel.
- Move next to:
In the Layers panel, click and drag a component to a different location in the list.
PhixFlow moves the component to be next to the component:- where you drop in the list
- and also moves the component on the screen canvas.
- Move into:
To move a layout or component inside another component, in the Layers panel, hold Shift and drag it onto a container component in the list.
PhixFlow moves the component into the component:- where you drop in the list
- and also moves the component on the screen canvas.
| Tip |
|---|
The Layers panel lists the components from the repository Layers section. You can also move components within the Layers section of the repository in the same way as you can move them in the Layout panel. |
Moving Components on the Canvas
To move components around on the screen canvas:
- Move next to:
On the canvas, click and drag a component and drop onto another component
PhixFlow moves the component next to the drop location. For example, if you drop a field on top of another field, PhixFlow puts them next to each other. - Move into:
On the canvas, Shift+click and drag and drop onto another component.
PhixFlow moves the component inside the other component. For example, if you drop a field onto an area, PhixFlow puts the field into the area.
Preventing Accidental Dragging
To prevent accidental dragging of components and layouts 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.
| Name | Description | Example | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Prevent Dragging | To stop a component from being draggable on the screen canvas, in Component properties →
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 →
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.
| ||||||||||
| Preferred Parent | Theme 2.1 palette components and layouts are configured with a preferred parent. When you drag a component on the screen canvas, PhixFlow recognises a parent component and automatically puts the dropped component inside. You do not need to use Shift+drag. To configure a component as a preferred parent, use Component properties →
| 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
|
