Flexbox

This topic describes the options and limitations available when using a Flexbox component.

Content settings

Flexbox Layout
These settings control how the basic Flexbox space is set up.

The only content settings you can make for Flexbox components is to split the layout into rows or columns. In actuality, adding rows or columns simply nests two new Flexboxes inside the original Flexbox. Deleting rows or columns removes the selected Flexbox and allows the parent Flexbox, if any, to fill the entire space.

You can use these options in any Flexbox component.

These are the basic options:

  • Split Into Rows

    When you select this option, the Content tab display changes to provide options to specify the number of rows (that is, horizontally-oriented Flexbox components) the primary Flexbox is to be divided into. To increase the number of rows, click the plus (+) button. To decrease the number of rows, click the minus (–) button. If there are only two rows, and you click the minus button, the parent Flexbox reverts to a single component.

  • Split Into Columns

    When you select this option, the Content tab display changes to provide options to specify the number of columns (that is, vertically oriented Flexbox components) the primary Flexbox is to be divided into. To increase the number of columns, click the plus (+) button. To decrease the number of rows, click the minus (–) button. If there are only two columns, and you click the minus button, the parent Flexbox reverts to a single component.

Interactions

Trigger Event
The Flexbox component can trigger these events:
  • On Startup

    This event is defined automatically and immediately when you assign a data service to the Flexbox component. Typically, it runs the assigned data service.

  • On Load

    This event might display as one of these values:

    • Data Service has run (On Load), where Data Service is the name of a data service assigned to the component
    • On Load (No Data Service), where no data service has been assigned to the component
Target Action
Depending on the target, the Flexbox component can perform a Get operation or a Clear operation on the target component.

Style settings

Note: The Flexbox component has no Margin setting.
Orientation
This setting has these options:
  • Vertical (default)

    When this option is selected, contained components are arranged in a vertical stack.

  • Horizontal

    When this option is selected, contained components are arranged in a horizontal line.

Width / Height
This setting has these basic options, with a related Value field:
  • Relative (default)

    When this option is selected, use the Value field to specify a value for the width/height that is relative, as a ratio, to other Flexboxes in that same basic space.

    For example, suppose you have a layout with two Flexboxes next to each other horizontally. If you set the relative width of the left Flexbox to 1, and you set the relative width of the right Flexbox to 3, then the system adjusts the width of both Flexboxes in a 1:3 ratio. This means that the Flexbox on the right is now three times wider than the Flexbox on the left.

    The same principle holds for Flexboxes that are arranged vertically within the same horizontal space. For example, if you were to add a row within a Flexbox, the system actually creates two Flexboxes within the first one, and stacks them vertically. You can then specify relative heights for the two new Flexboxes, using the same ratio principle.

  • Pixel

    When this option is selected, use the Value field to specify the number of pixels used to make the width or height of the Flexbox. This essentially makes the width/height an absolute setting. Components always retain the same amount of space.

    If you have two Flexboxes side by side, and you set the first one to be 400 pixels wide, it renders a Relative setting for the other meaningless. The second Flexbox remains the same width (the rest of the available horizontal space), regardless of any Relative setting. You can, however, also set the second Flexbox to a fixed Pixel setting. In this case, you might or might not use all the available space and have blank areas.

Note: Regardless of whether you use a Relative setting or a Pixel setting, the Value field recognizes only positive integers.
Overflow
This setting controls how the Flexbox is to handle any content that does not fit within the edges of the container. This setting has these options:
  • Hidden

    When this option is selected, any content that does not fit within the edges of the container simply does not display. It is cut off by whatever edge it exceeds.

  • Wrap

    When this option is selected, App Builder attempts to "wrap," or move, any content that does not fit within the edges of the container. For instance, if you have a horizontal line of components, and the last one does not fit within the right edge of the Flexbox, App Builder moves it down to the next line, so it can still be displayed.

  • Scroll

    When this option is selected, App Builder provides an appropriate scrollbar, so that you can scroll back and forth (or up and down) to view all the content.

Background Color
Use this setting to specify a background color for the Flexbox. You have these options to specify a color:
  • Click the down arrow at the right of the field, and then select a color from the popup color picker.
  • Type a hexadecimal color value into the field, using the #RRGGBB format.
Alignment
Use this setting to align the content within the Flexbox. You can align content both horizontally (Left, Center, or Right) and vertically (Top, Middle, or Bottom).
Border
Use these options to define a border for the Flexbox. When defined, any components in the Flexbox do not overlap with the border, but remain inside the border.

When defining a border, you have these options:

  • You can create a border in which All Sides have the same width or in which each Individual side can be different widths (including a width of zero [0]).

    Width sizes are given in pixels.

  • You can set the border Color using the same options for color specification as for the Background Color.
Padding
This setting specifies the amount of space inside the Flexbox that is to remain clear of any objects or components. Padding settings are given in pixels.

You can set the padding for All Sides of the Flexbox to be the same at one time, or you can set each Individual side to different values.

Related topics