Multicolumn repeating panel

Anvil Q&A
1

I would like to create a PDF that shows a list of values that flows through 3 columns per page. Something similar to this:
image

I could make a form with 3 repeating panels, then a cycle that generates the pages and for each page puts the right number of elements on each repeating panel. But in order for this to work I would need to know how many items fit in a repeating panel, which is impossible because the items have variable height.

What is the best approach?

Is it possible to link 3 repeating panels so that one flows into the next, and link one form to the next one?
Or flow panels?
Or measure the height of the template form for each item?
Or measure how tall is one repeating panel as I add items to it, so I know when to jump to the next one?

EDIT
There is another repeating panel with variable height that introduces one more variable. I edited the snapshot adding the green rectangle to show that the yellow repeating panel height is not known.

2

you can achieve the 3 column layout in a single repeating panel with a role and some css.

.anvil-role-three-col > div {
  column-count: 3;
  column-gap: 3%; /* adjust as needed */
}

.anvil-role-three-col > div > div {
  break-inside: avoid;
}

But that doesn’t really help with the page break problem - just throws the can a little further down the road.

1 Like
3

This works, thank you!

Unfortunately there are 2 problems:

  1. The one you mentioned: it works on one page, not on a multi page document
  2. It minimizes the height of the form, while I would like to vertically fill a page before jumping to the second column. The result is ugly when I have 5 items spread over 5 columns, because I see them side by side, but I would like to see them one above the other.

Perhaps there is a way to get it to work the way I want by creating a repeating panel where each item contains a full page, and the pages spill into the next just like this repeating panel spills into the next. And all of this needs to work in this cycle, which creates one instance of CratePDF per crate, and each crate may or may not be multi page:

self.add_component(TruckPDF(self.truck))
for crate in self.truck.crates:
  self.add_component(PageBreak(0))
  self.add_component(CratePDF(crate))

For me it’s important to see them one above the other, but I don’t like to sink hours playing with css, so I will try calculating the height of each form based on the length of its text and go with 5 repeating panels filled by a cycle. :frowning:

1 Like
4

To fill the height of a page, using the css above it can be adjusted to:

.anvil-role-three-col > div {
  column-count: 3;
  column-gap: 3%; /* adjust as needed */
  height: 600px; /* adjust as needed */
  column-fill: auto; /* default is balanced */
}

.anvil-role-three-col > div > div {
  break-inside: avoid;
}
2 Likes