We’ve been on a prototyping binge recently and while working with dynamic panels we learned a neat trick that we thought we’d share.
In one situation, we were designing a page with a vertical list of widgets each with different panel states. We wanted any widgets below to dynamically Push/Pull to allow for the varying heights of offpage panels.
What we found was that even though we configured all the widgets with Push/Pull, because the size of the dynamic panel matched that of its first state, longer subsequent states were cut off - and the widgets weren't pushing and pulling as we'd intended.
The solution to allowing the widgets below to Push/Pull AND display the full content of taller panels was the Fit to Content feature. This feature solves a very common use case and can be difficult to find in the application.
Here we have two widgets stacked on a page.
On Widget 1, a user was expected to read messaging on State 1 before selecting “Next” to get to a form on State 2 making the secondary panel longer than the default panel.
When adding the OnClick case to the “Next” button we pointed it to State 2 and enabled the Push/Pull Widgets Below option. However, when previewed, the widgets DIDN’T Push/Pull!
What we found was that when previewed, State 2 of Widget 1 was being cut off by Widget 2.
We could have worked around this by adding white space between the two widgets and dragging the dynamic panel mask down to allocate the necessary space for State 2. This isn’t ideal since we’ve configured the whole Push/Pull interaction and that’s what we want dag-nabit.
The elegant solution lies in a simple right click. With the mask selected, right click and select “Fit to Content.”
Now preview your masterpiece and voilà! We have created a truly dynamic prototype where the main page responds to the height of dynamic panels off the page.
TL;DR: Watch our video summary of the issue and how we implemented the solution.