You should be able to use the internal variable, [[Window.width]] to calculate the widths of your panels in the OnPageResize event. For instance, the three panels in the middle row could be set to [[(Window.width/3) - Margin]] (where “Margin” is a text value or global variable for the padding space between column elements). You’d probably want to resize a rectangle widget (such as your white background) and then in that widget’s OnResize event, calculate the needed widths and .x location values for the widgets that belong to it. Panel A (Network capacity) would move Panel B (Fulfillment backlog) to [[This.right + Margin]] and Panel B would move Panel C to [[This.right + Margin]] in a chain effect.
If a panel’s content is complex, like maybe the Network Capacity with a bar chart, you could create a separate page just for it and use Axure’s Adaptive (responsive) design feature, setting breakpoints as needed. Then, in your main page, load your “subpage” in an Inline Frame widget and resize that Inline Frame widget’s width to get it to flow fluidly.
Hello! Is there a control method such as a master switch that allows the components to synchronize and adapt when the size of the dynamic panel changes, or is it necessary to set the size of each component separately? Do you have a prototype example file?
