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
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata



The flex layout is a powerful layout, with many configuration options, based on the CSS Flexbox layout. The flex layout consists of a single series of adjacent components or containers, configured as either a column or a row. To this end, the layout has five properties:

  • direction controls whether the flex layout appears as a row or a column.
  • wrap controls what happens when the components are too big for the container. For instance, if the direction property is set to row, but the components in the row are too wide to fit in the flex container, this property controls whether a new row should be created, or scrollbars should be used.
  • justify controls where extra space is located when the components are not large enough to fill the container along the main axis. i.e. the space at the end or a row, or on the bottom of a column. If the components do not fully fill the space, the remaining gap can be placed at the beginning, the end, evenly on both sides, or evenly distributed between the components.
  • alignItems controls where extra space is located when the components are not large enough to fill the container along the alternative axis, i.e. the space below a row, or on the right of a column. If the components do not fully fill a row, the remaining gap can be placed above, below, evenly on both sides, or evenly distributed between the components. For a column it is left, right, both, or evenly distributed.
  • alignContent controls what happens to items that have been wrapped.

In addition, each component in a flex layout contains three properties:

  • basis controls the default size of a component along the flex container's direction. You can enter the value in pixels (e.g., 75px), as a percentage of the total length of the container (e.g., 50%), or you can use auto. All components configured to auto will equally share the available space in the container.
  • grow and shrink control the way that a component responds to changes in the flex container's width (for rows) or height (for columns). grow controls what happens when additional space is available, and shrink controls what happens when the component does not have enough space to fulfill its basis.

Grow and shrink are interpreted relative to other components in the Flex container, and are best understood through some simple principles:

  • grow value of 0 will prevent the component from stretching beyond its basis. A shrink value of 0 will prevent the component from shrinking beneath its basis.
  • If all components in a row have the same (nonzero) grow value, they will all grow equally to accommodate more space. If they have the same shrink value, they will all shrink evenly.
  • Components with higher grow and shrink values will grow and shrink more. Specifically, a grow or shrink value is evaluated relative to the sum of all grow and shrink values in the container.

On this page ...

IULocgo


Flex Container



Growing and Shrinking

The flex container's grow and shrink properties allow a great deal of control over how different components expand and shrink. To demonstrate, here are three components nested inside a flex container, with a direction of row:

All three components have the same basis, so at this session width, they all have the same size. However, the blue component has a much larger grow value than the other two components. So, when we increase the length of the flex container along its direction property:

The blue component does most of the stretching. Specifically, since the sum of all grow properties is 1 + 1 + 5 = 7, and the blue component has a grow property of 5, for every 7 pixels the flex container grows, the blue component will grow by 5. Now let's try shrinking the container, noting that the red component has a shrink value of 5:

As you can see, a larger shrink value will make the container shrink more. For every 7 pixels the flex container loses, the red component will lose 5.

Static Widths

Now let's try the same example again, but with some different grow and shrink values:

We've given the red and green components identical values, so they should stretch and shrink at the same rate. Meanwhile, the blue component's grow and shrink values are both 0, so when we make the flex container wider, it stays the same size:

Even Scaling

Now let's say we start off with a blue component twice the basis of the others:

In order to maintain this ratio as the width of the container increases, it must have a grow value twice that of the others:


Examples

Configuring a Flex Layout

The Flex container is ideal when designing mobile responsive applications because it lets you set dynamic sizes to accommodate various screen sizes. By using the Flex container properties, it allows components to grow and shrink dynamically relative to each other. In the following examples, we'll use the Flex Container to create two types of views similar to the descriptions above:

  • a main view containing three components where only the bottom two stretch
  • a header view that has components pushed to both the left and right of the view with empty space between them


Grow and Shrink Properties

When the grow and shrink properties are set to non-zero numbers, they are allowed to change size. If they are set to zero, they are not allowed to grow or shrink, they will always match their basis value.

Creating a Main View

In this first example, we are going to configuring three Label components using a Flex container to demonstrate how to freeze the size of the first label and allow the second and third Labels to stretch to fill the remaining space. We can do this by setting the grow and shrink Position properties to a non zero number. The first Label component will not be allowed to grow or shrink because both properties are set to 0.

  1. Create a new view using the Flex container.

  2. The new view will open in the Designer. The Flex view will have some preset properties so you might want to look at the GUI and the PROPS in the Property Editor. These can be modified based on your design requirements.



  3. Using the square handles, set your view to 300px by 300px.

  4. With the root selected, drag three Label components onto the view from the Component Palette. You'll notice that the direction property is set to column, so the all three labels are placed in a column starting at the top of the view. The default Position property settings for all three Labels are:

    1. grow: 0 - the component can not grow
    2. shrink: 1 - allows the component to shrink
    3. basis: 20px - is the ideal size for the component




  5. We want the first label to be a static size and never change. Select the first Label and set the following properties:
    1. grow: 0
    2. shrink: 0
    3. basis: 100px

  6. Modify the component style for the Label component any way you want. We used the following settings:
    1. Click the ModifyStyles  icon next to the styleproperty.
    2. Expand the Background category and set the Background color to Orange.
    3. Close the style popup and set the text property of the Label component to Orange Label.

  7. Select the second Label component and set the following properties:
    1. grow: 1
    2. shrink: 1
    3. basis: 100px

  8. Modify the component style for the Label component. We used the following settings:
    1. Click the ModifyStyles  icon next to the style property.
    2. Expand the Text category and set the color to White
    3. Expand the Background category and set the Backgroundcolor to Blue.
    4. Close the style popup and set the text property of the Label component to Blue Label.

  9. Select the third Label and set the following properties:
    1. grow: 1
    2. shrink: 1
    3. basis: 100px

  10. Modify the component style for the Label component. We used the following settings:
    1. Click the ModifyStyles  icon next to the style property.
    2. Expand the Background category and set the Background color to Green.
    3. Close the style popup and set the text property of the Label component to Green Label.

      Once all the Label Position properties are set, your view should look like the image below.



  11. Now, let's resize the components in the same direction as the container. Select the root container in the Project Browser. Using the square handle at the bottom of the view, drag the view down the length of your workspace. You'll notice that the Orange Label component didn't grow, and because the Blue and Green Label components were give the same grow values, they were stretched at the same rate.




  12. Select the root container in the Property Editor, and grab the square handle at the bottom and shrink your view. As the container gets smaller, the bottom two Labels will start to shrink. If you don't want them to shrink past their basis, change the shrink property to zero so the Labels will not shrink smaller than their basis value. As you can see in the image below, because the Orange Label shrink property is set to zero, it didn't shrink.



  13. You can use this example to modify the different PROPS and Position properties to see how the behavior of the Label components change.

Creating a Header View

In this example, we'll use the Flex Container to create a header view that contains several components pushed to the far left and right of the header. Then we'll show the header view on top of the Flex View (from the previous example) in a Perspective Session.

  1. Create a new view using a Flex container. 

  2. The new view will automatically open in the Designer. With the view selected, set the following size properties so it is wide and short:
    1. width: 600
    2. height: 60



  3. Select the root container in the Project Browser.

  4. In the Property Editor, set the direction property to row. Notice how the GUI at the top of the Property Editor also changed. You can use either the GUI or the PROPS to modify the containers properties.



  5. From the Component Palette, drag an Icon component and place it on the left side of the view.

  6. With the Icon selected, set the following Position properties:
    1. iconPath: material/menu
    2. grow: 0
    3. shrink: 0
    4. basis: 60px



  7. Next, add a Label component and set the following Position properties:
    1. text: My First Project
    2. grow: 1
    3. shrink: 1
    4. basis: 150px

    While we still have the Label selected, let's modify the text style:
    1. Click the Modify Styles  icon next to the style property and expand the Text category:
    2. Font Weight: Bold
    3. Text align: Center

  8. Add another Label, and set the following Position properties:
    1. text: Login
    2. grow: 0
    3. shrink: 0
    4. basis: 50x

    Let's modify the text style for the Label component.
    1. Click the Modify Styles  icon next to the style property and expand the Text category:
    2. Font Weight: Bold
    3. Text align: Right

  9. Add another Icon component to the container on the right and set the following Position properties:
    1. iconPath: material/person
    2. grow: 0
    3. shrink: 0
    4. basis: 60px

      Here's what your header view should like in the Designer after adding all the components and setting each component's property values.



  10. Save your project.

  11. Now let's show the header view on top of the Label page in a Perspective Session. Click on the Page Configuration  icon at the bottom of the Designer window.

  12. Right click on the Flex view container and select Launch Url.



  13. With your Perspective Session open, stretch and shrink your browser window horizontally and you'll see the Header grow and shrink with the icons locked in the corners.



    You can modify the different PROPS and Position properties to change the behavior for the Label components on your browser.




  • No labels