Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


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 ...

IULocgo


Column Container

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

heightHeight, in pixels of the component placed in the column.int
breakpoints

Position Property

Description

Data Type

nameName 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
spanNumber of columns the child's width will span.value: numeric
rowIndexRow 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
colIndexColumn number upon which the child's span should begin unless forced to wrap.value: numeric
orderWhere 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

columnsNumber 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

nameName of the breakpoint. Options are sm (small), md (medium), or lg (large).value: string
minWidthMinimum width of container, in pixels.value: numeric
array
gutters

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

Position Property

Description

Data Type

verticalVertical space, in pixels, to place between child components.value: numeric
horizontalHorizontal space, in pixels, to place between child components.value: numeric
object
styleSets 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.

  1. Create a new view using a Column container.

  2. 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

  3. 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.

  4. 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.



  5. 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.



  6. 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



  7. This is a good time to Save your project before continuing.
  8. 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.
  9. 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.
  10. Move the components around so each row has Label and one Text Field.
  11. Set each Label to the first four columns. 
  12. Set each Text Field to be the last eight columns.
  13. Keep the Button component in its own row at the bottom and shrink it to be centered with eight columns.



  14. Save your project.
  15. 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.
  16. 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.
  17. Move the components around so each row has two Labels and two Text Fields on each row.
  18. Set each Label to be two columns wide and each Text Field to be four columns wide.
  19. Keep the Button component on its own row at the bottom and shrink it to be centered with four columns.



  20. Save your project.
  21. Let's launch a Perspective Session to test our breakpoint views. Click on the Page Configuration  icon at the bottom of the Designer window.
  22. Right click on your column container and select Launch Url.



  23. 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






  • No labels