Growing a "Group" box as a Repeater adds rows

repeater-widget
#1

I’m working on a repeater as a checkout “Cart” workflow. When the cart is loaded, the number of rows are dictated by added items, tracked with Global Variables. Point being that the resulting number of rows will be dynamic.

I’d like to put a “Group” box around the repeater and have it grow with the repeater. I tried to actually use Axure groups and set the resizing constraints. The resize constraints work as I’m growing the box in the edit environment, but the items stretch and move when done dynamically in the browser. That seems like a bug FWIW.

I tried putting it into a Dynamic panel and using “Fit to Content” with no luck either.

All that to say, I’m interested in two things:

  1. Putting a repeater inside of a Box widget and growing the Box based on rows added.
  2. “Pushing” content below the repeater for the same goal.
#2

Do you have an .rp file you could upload? It’s not clear what you’ve tried in terms of “groups and …resizing constraints” or what bugs you might be seeing.

I’ve had good results with this approach. What specifically is not working for you? An example .rp file and/or good description or sketch of what you want to achieve can really help troubleshoot/solve specific issues with this as well.

A dynamic panel (dp) can look just like a Box (rectangle) widget, but with more “dynamic power.” You can style it with borders, radius, color fills, etc. You can let the repeater dimensions (or any content in it) define the size of the dynamic panel (“Fit to Content” style option) and if needed, limit the maximum and/or minimum size. If you need extra padding around your repeater, you can nest all this in an outer dp, turn off “Fit to content” and drive it’s size from the inner dp’s Resized event.

I’ve found that using the dynamic panel’s Resized event works well for this, as long as the rest of the content on the page is well organized, such as using Groups or DPs for logical sections. I often use a kind of “chain reaction” approach, where the resized dp moves the section immediately below it; then that section’s Moved event moves the section immediately below it, etc.
For example, to retain a 40 px gutter between sections,

MyRepeaterDP
Resized
Move MySection2 to ( , [[This.bottom + 40]])

// where the x-dimension is left blank because no left-right movement needed

MySection2
Moved
Move MySection3 to ( , [[This.bottom + 40]])

// or you could use the “Move with this” option in the Move action

#3

Seems as if the Resized option is the most reliable and was quite easy to pull off for adding/deleting rows.

Thanks (AGAIN)!

closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.