Making the width/height absolute (pixel-based)

If the Flexbox component is defined as part of a "row" of Flexboxes, you can set a pixel-based width for each column. If the Flexbox component is defined as part of a "column" of Flexboxes, you can set a pixel-based height for each row.

To make the width/height of a Flexbox component absolute (pixel-based), use this procedure:

  1. Select the Flexbox for the width/height setting you want to change.
    If you are working with nested Flexboxes, make sure you have the correct (nested) Flexbox selected (and not the parent Flexbox).
  2. In the component Properties panel, select the Style tab.
  3. From the list of styles, locate the Width or Height setting and click Show More.
  4. Select the Pixel option.
  5. In the Value field, enter the number of pixels to use for the width or height of the selected Flexbox.

    App Builder automatically changes the display as soon as you enter this value.

    Note: 
    • Choose these values carefully, keeping in mind that monitors or screens with different resolutions can radically affect the resulting appearance of the Flexbox.
    • Keep in mind also that, if you use pixel settings for each Flexbox in the row or column, you can create a situation in which the total number of pixels exceeds the available number of pixels for some resolutions. In this case the Flexboxes will run off the available space and the display will be cut off.
    • If one Flexbox in a row/column is set to a Relative value, and another is set to a Pixel value, the Pixel value takes precedence.