Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Overview

The following video shows you how to move components around

Moving Content

Excerpt

To Move a Component

  1. Drag it to the desired location, this can be done either in the
    Insert excerpt
    _layers
    _layers
    nopaneltrue
 panel and
  1.  section or on the
screen.
Excerpt

To move an item you drag it onto another component and: 

  • drag and drop places a component next to the component on which you drop. This creates a sibling relationship. 
  • shift+drag and drop moves a component into the component on which you drop it. This creates a parent-child relationship.
If you drag a component that is a parent, all its children move with it.
  1. Iframe
    src https://youtube.com/embed/dNDLBy2vXWw?&rel=0&ytp-pause-overlay=&list=PLbPt6SI1Zhb8aOP-qz-KzSlB-VncvcIX-
    width680px
    height400px

    1. Insert excerpt
      _screen_icon_only
      _screen_icon_only
      nopaneltrue
       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

    Image Added

    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

    Moving Using

    Copying Components

    Right-click components in the 

    Insert excerpt
    _layers
    _layers
    nopaneltrue

     Panel

    To move components on the screen canvas, we recommend that you use the  and select

    Insert excerpt
    _copy_layerscomponent
    _copy_layerscomponent
    nopaneltrue
     panel. This makes it easy to see container components that can be hard to select on the canvas. The hierarchical list also makes the parent-child relationships clear. You can select and drag an individual components or a group of components up and down the hierarchy to move them in the screen canvas.

    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. 

    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

    Insert excerpt
    _repository
    _repository
    nopaneltrue
    .

    Image Added

    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 →

    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
     → 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 →

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Basic Settings 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 componentComposite 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 dropped child component inside . You do not need to use Shift+drag.it.

    To configure a component as a preferred parent, use Component properties →

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Basic SettingsParent 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 

    Insert excerpt
    _pin_unpin
    _pin_unpin
    nopaneltrue
    . Pinned objects have an absolute position and move where they are dragged.