ACP Flexbox
Use ACP FlexBox to make ACP diagrams responsive to the size of the browser window! With FlexBox, ACP will automatically rearrange text boxes, frame nodes, and other nodes to fit the browser window. FlexBox is automatically available to all users using ACP.
What does it do?
ACP FlexBox borrows from CSS FlexBox to allow you to turn nodes such as Text Nodes into FlexBox items that are automatically displayed in a line and automatically wrap to the next line where there is not enough space for them on the current line like so:
Wide window | Narrow window |
---|---|
![]() |
Without FlexBox |
With FlexBox |
Items contained in FlexBox items are not responsive, meaning they will keep their layout within the FlexBox item and will not change their size or location within the FlexBox even if the browser window changes size. If the window is too small to accommodate an entire FlexBox item, a scrollbar will appear.
Note that diagram arrows in FlexBox items will not be displayed.
How to use it
To use FlexBox, you’ll need to set a diagram or module to be a FlexBox container, and then set nodes inside the FlexBox container as FlexBox items. You can set FlexBox containers and FlexBox items using the ACP styles attribute. This section will cover the following steps:
- How to enable the ACP styles attribute
- Set a diagram or module to be a FlexBox container
- Set nodes inside the FlexBox container to be FlexBox items
Enable ACP Styles
To use FlexBox you will need to manually update ACP styles attributes. You can do this in Desktop Analytica using the attribute panel. You can enable the ACP Styles attribute directly from the attribute panel for individual nodes if it is not an existing option, but to enable it for all nodes you can follow the steps below:
- Go to the Object menu
- Go to Attributes… to open the Attributes dialog
- Double click on ACP Styles so it has a checkbox next to it
- Press OK
Note that you will need to do this for both Variables and Module classes to have ACP Styles show up for both classes of nodes. By default, the Attributes dialog changes settings for Variables. Go to the dropdown at the top of the dialog to select Modules and enable ACP Styles for modules as well.
You can now add the FlexBox ACP styles into the attribute panel. If there are existing ACP styles, just enter the FlexBox setting on a new line.
FlexBox containers
To enable FlexBox, add the following ACP style attribute into the the top-level diagram (the Module you want to enable FlexBox for):
- display: flex
This turns that diagram into a Flexbox container that can contain FlexBox items. Once a diagram is turned into a FlexBox container, only FlexBox items or nodes entirely contained inside a FlexBox item will be visible in ACP.
FlexBox items
The FlexBox items are the blocks that actually line up and wrap to the next line. Any nodes used to build diagrams (e.g., variables, indexes, modules, or libraries) can be FlexBox items. Input and output nodes and buttons cannot be FlexBox items.
To turn nodes into FlexBox items, add the following ACP style attribute to the node:
- flex_box_item: yes
By default, Frame nodes have the ACP style flex_box_item: yes but other nodes will be set to flex_box_item: no.
FlexBox automatically puts all FlexBox items into a single line and does not preserve the exact location of FlexBox items in Desktop Analytica, i.e., you can see below how the two FlexBox item text boxes are not aligned in desktop but are aligned in ACP.
Desktop | ACP |
---|---|
![]() |
![]() |
The order in which FlexBox lines up items is based on their vertical position from the top of the screen. The higher their position, the earlier in FlexBox’s order they will be. If two nodes have the same vertical position, the leftmost node will come first, e.g.:
Desktop | ACP |
---|---|
![]() |
![]() |
The simplest way to use FlexBox items is to turn Text or Frame nodes into FlexBox items and put the nodes you want to display inside those Text nodes. Nodes must be entirely contained inside the parent FlexBox item to show up in ACP. Any nodes that are not FlexBox items and not entirely contained inside a FlexBox item will not be visible at all in a FlexBox container diagram; see the below example where all nodes aside from the FlexBox item text node are not FlexBox items:
Desktop | ACP |
---|---|
![]() |
![]() |
FlexBox items do not nest. Even if a FlexBox item is contained entirely inside another FlexBox item, it will still be included as its own FlexBox item, e.g.:
Desktop | ACP |
---|---|
![]() |
![]() |
Note that FlexBox does not work with the ACP Style auto zoom. If both auto zoom is enabled and a FlexBox container is designated, ACP will not auto zoom. Only FlexBox will be enabled.
Settings
These settings should be added to the ACP styles attributes of the top-level diagram where flex_display is set.
Flex direction
This attribute sets the direction of the line of FlexBox items.
- flex_direction: row (default) displays FlexBox items are horizontally in rows
- flex_direction: column display the FlexBox items vertically in columns
The following images show examples of how Flex direction affects the display of items. Notice how the nodes are displayed in a different direction and therefore when nodes wrap to the next line the overall arrangement of nodes differs.
Flex direction: Row (default) | Flex direction: Column |
---|---|
![]() |
![]() |
![]() |
![]() |
Flex wrap
Use Flex wrap to turn off flex wrapping.
- flex_wrap: wrap (default) turns on flex wrap, which is what tells the FlexBox items to automatically wrap to the next row when the window is too small to fit the FlexBox items in the selected flex direction
- flex_wrap: no_wrap turns off flex wrap so items will not automatically break to the next line. FlexBox items will still rearrange themselves on a single line by shrinking the gap between items as the browser window shrinks to show all of the nodes in the screen, e.g.:
will turn into the following when wrap is turned off and the window is narrowed:
Flex vertical alignment
This attribute sets where the FlexBox items display vertically in the browser window.
- flex_v_align: top (default) vertically aligns FlexBox items to the top of the browser window, like so:
- flex_v_align: center vertically aligns FlexBox items to the center of the browser window
- flex_v_align: bottom vertically aligns FlexBox items to the bottom of the browser window, like so:
Flex horizontal alignment
This attribute sets where the FlexBox items display horizontally in the browser window.
- flex_h_align: left (default) horizontally aligns FlexBox items to the left of the window
- flex_h_align: center horizontally aligns FlexBox items to the center of the window
- flex_h_align: right horizontally aligns FlexBox items to the right of the window
Note that for center and right horizontal alignment, the items will automatically realign to the center or right, respectively, if the browser size is changed.
Flex gap
- flex_gap: x where x is a number sets the gap between FlexBox items to x pixels. By default the flex_gap is set to 8 pixels
Enable comment auto-refresher