Column Containers

In a Column Layout, the view or container is divided into consistently-sized and spaced columns. By default, there are 12 columns. Each component's width is described only by how many of these columns it spans. Since these columns will grow wider or narrower to accommodate changes in the width of the parent container, elements in a column layout can stretch horizontally. To this end, each component has two properties that control its size and position:

height for components in a column layout does not scale with the height of the layout itself. It is specified in pixels, and unlike width will not stretch or shrink based on the parent container. A height of auto will tell a component to keep the same vertical size as other elements in its row.
breakpoints contains three sets of information about the component's positioning. Which set is used is based on which breakpoint is active (more on breakpoints follows). Each set consists of:
- name is "sm", "md" or "lg". The name simply corresponds the the breakpoint that the particular set of positioning data refers to.
- span refers to how many columns wide the entity should be in the current breakpoint.
- rowIndex and colIndex refer to the X and Y coordinates of the leftmost cell that the element occupies in the given breakpoint.
- order refers to the order of the element in its row. This property will be set and updated automatically.

On this page ...

Column Container

Watch the Video

Easy Screen Flexibility

A Column Layout is a simple approach to what could be termed responsive design - the process of developing the same view, or similar ones, in different ways to seamlessly accommodate everything from phone screens to 4K televisions in a single project and set of pages.

Breakpoints encapsulate this strategy in Perspective. The column layout offers the opportunity to establish three different versions of your view, which will then be used at different ranges of screen widths. You can find and configure these versions from the top of the Perspective Property Editor for a Column container; they are:

Small (default 0 px)
Medium (default 480 px)
Large (default 996 px)

The px values denote at what minimum screen width (in pixels) the view or container should use a given configuration. Selecting one of the sizes will give you the opportunity to configure component positions and spans for that size. This gives more refined control over how a given view or container scales. A column layout is appropriate when your view or container meets some specific criteria:

You don't need your components to scale vertically, outside of the three provided breakpoints.
You want to include the same components in the view regardless of screen size.
You want the components to behave the same way at any size (in terms of scripting, navigation, bindings, etc.)
You don't need screens at different sizes to use different views.

Here is an example of a column view, configured with small, medium, and large breakpoints.

Column Container Position and Root Properties

Position Properties

Position properties in for a Column container indicate the height of the component placed in each column and the name and order of the breakpoints. For more information, see Perspective - Column Container.

Position Property

Description

Data Type

height

Height, in pixels of the component placed in the column.

int

breakpoints

Position Property	Description	Data Type
name	Name of a breakpoint defined in container. If this matches the currently applied breakpoint, these rules determine child layout. Options are sm (small), md (medium), or lg (large).	value: string
span	Number of columns the child's width will span.	value: numeric
rowIndex	Row index (starting from 0) in which to place child. Children may wrap lines within a row. Children in separate rows don't affect each other's layout.	value: numeric
colIndex	Column number upon which the child's span should begin unless forced to wrap.	value: numeric
order	Where component is places among its siblings within its row. Ordering is independent per row.	value: numeric

array

Root Properties

Root properties are accessed by selecting the root folder for a Column view on the Project Browser tree.

Root Property

Description

Data Type

columns

Number of column spacings the container is divided into. Children plot layouts across groups of columns, or wrap to the next line when space does not allow. Default is 12.

value: numeric

breakpoints

Width breakpoints declarations for child layouts. When container is sized below minWidth, child position rules will fall back to the next set breakpoint rules.

Position Property	Description	Data Type
name	Name of the breakpoint. Options are sm (small), md (medium), or lg (large).	value: string
minWidth	Minimum width of container, in pixels.	value: numeric

array

gutters

Amount of space, in pixels, to place between child components.

Position Property	Description	Data Type
vertical	Vertical space, in pixels, to place between child components.	value: numeric
horizontal	Horizontal space, in pixels, to place between child components.	value: numeric

object

style

Sets a style for this view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object

Configure a Column Container

The Column container allows you to switch between three different views depending on the size of your Perspective Session. In this example, let's create a data entry form for the company's client list. We'll create a view and add components, then we'll switch between the views to arrange the components for each layout size.

Create a new view using a Column container.
With the new Column container selected, you'll see the column breakpoints at the top of the Property Editor. Set each of the breakpoints to the following:
1. Small breakpoint - 0
2. Medium breakpoint - 500
3. Large breakpoint - 1000
Select the Small breakpoint in the the Property Editor.

Selecting Breakpoints

It's important to pay attention to which Breakpoint is selected. Any changes you make will be applied only to the currently selected breakpoint.
Click and drag the square handle on the right side of the view to shrink the width of the container to just under 500 px wide. Arrow guidelines along the top of the component show where the small breakpoint ends and medium breakpoint begins at 500 px.
Let's add some components to the Column container.
1. Drag a Label component on to the container and expand it to fill all 12 columns in the first row.
2. Drag a Text Field component on to the container and expand it to fill all 12 columns of the second row.
3. Repeat Steps a and b until you have four Labels and four Text Fields.
4. Add a Button component at the bottom of the screen and expand it to fill all 12 columns.
In the Property Editor, update the text property of the Label and Button components and assign them a useful description:
1. First Label: Company Name
2. Second Label: City
3. Third Label: State
4. Fourth Label: Industry
5. Button: Add Record
This is a good time to Save your project before continuing.
Now, let's switch to the Medium breakpoint. Select the Medium breakpoint at the top of the Property Editor. Notice that all of the components are still showing, but they are now unorganized.
Using the square handle on the right side of the view, click and drag it to expand the width of the container to approximately 500 px wide. This will give you a better idea of what the view will look like in the browser.
Move the components around so each row has Label and one Text Field.
Set each Label to the first four columns.
Set each Text Field to be the last eight columns.
Keep the Button component in its own row at the bottom and shrink it to be centered with eight columns.
Save your project.
Now, select the Large breakpoint in the Property Editor. Once again, you'll notice that the all the components are showing, but they are unorganized.
Using the square handle on the right side of the view, click and drag it to expand the width of the container. This will give you a better idea of what the Large view will look like in the browser.
Move the components around so each row has two Labels and two Text Fields on each row.
Set each Label to be two columns wide and each Text Field to be four columns wide.
Keep the Button component on its own row at the bottom and shrink it to be centered with four columns.
Save your project.
Let's launch a Perspective Session to test our breakpoint views. Click on the Page Configuration icon at the bottom of the Designer window.
Right click on your column container and select Launch Url.
With your Perspective Session open, stretch and shrink your browser window and you'll see the views change depending on the width of your browser.

Small Breakpoint

Medium Breakpoint

Large Breakpoint