Dividing/Splitting a Screen

Overview

To divide a screen into multiple sections using one of the following techniques:

:

• either, from the palette select a layout that is already divided by a horizontal or vertical split; see Divide a Screen Using a Palette Layout, below.

• or in an area right-click

• to show the popup menu and select on of the Add Area... options; see Divide a Screen Using "Add Area" Options, below.

Anchor

palette

palette

Divide a Screen Using a Palette Layout

Some palettes have layouts that have 2 areas contained by a split-view area. For example:

• Theme 2.1 Serene Grey - Basic Components → Area Split 

These can be used to divide you your screen into separate areas while also providing a splitter which allows designers and users to resize the areas.

Setup

1. In the screen canvas toolbar, click

   Insert excerpt
   _palette _palette nopanel true

   .
2. Expand a palette to find a layout that has 2 areas.
3. Drag the layout from the palette onto an existing area.
4. PhixFlow creates a layout with the following structure, this example is horizontal but vertical options are also available:

Image Removed

1. . 
2. Image AddedIf you have existing content on your screen this can be dragged into the appropriate area using the repository or layout section. Remember you will need to hold the shift key to drop content inside these areas.

Divide a Screen Using the "Add Area" Options

Anchor
element element

1. Right-click a screen.
2. Click Dashboard Screen Options.
3. Use one of the Add Area... options to add a new area for the screen, separated with by a dividing line.
   PhixFlow creates a new element in the form of a  a pane for this part of the screen.
4. Add a This new element is similar to a black screen and will require a suitable container, such as an area, form or card container .  Anchorpalettepalettein order for you to display content. 
   It may be easier to add one of the complete screens to the new element and remove the items you do not require.

Resizing

To resize a pane, drag its dividing line. This automatically resizes adjacent panes.

To prevent resizing, right-click to display the pop-up popup menu and select:

• Insert excerpt
  _area_lock_width _area_lock_width nopanel true

• Insert excerpt
  _area_lock_height _area_lock_height nopanel true

Removing a Pane

First, delete any layouts or components in it.

1. Right-click on the empty pane to display the pop-up popup menu.
2. Select 

   Insert excerpt
   _delete_item _delete_item nopanel true

    Pane. 

   Anchor
   add-area add-area

Learn More

• Table
• View
• Dashboard Element 

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.

• Screen Element