Horizontal RepeatingPanel (Again)

Hey everyone! I know this has been a topic before, but it seems to have been a while and I don’t want to necro a thread. Also, it doesn’t look like others have found exactly what I did.

I’m trying to write an app where I want a Horizontal RepeatingPanel. Somewhat by accident, I stumbled across this which it looks like Shaun did- it comes up if you search “horizontal” in the (immensely useful- well done, folks) “how do I” box in the app builder.

Unfortunately, I can’t for the life of me get that to create anything other than a fairly broken regular vertical RepeatingPanel when I try to put one in my app. I see it works great in the demo, but in my app, no such luck. Did I stumble across an old demo, or something I shouldn’t have found, or something that works when someone better at this does it? I followed the instructions from the search- cloned the app, included it as a dependency, and sure enough it’s in the toolbox. It just doesn’t work right when I try to drag it into the form.

Thanks!

The crucial extra bits can be found in that app’s theme.css (in the Assets):

.anvil-role-horizontal-repeater {
    display: flex;
}
.anvil-role-horizontal-repeater>div {
    min-width: 200px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}
.anvil-role-horizontal-repeater .anvil-panel-col {
    min-width: 200px;
}  
.anvil-role-twod-repeater .anvil-role-horizontal-repeater>div {
    overflow: hidden;
}
.anvil-role-twod-repeater>div {
    overflow-x: auto;
}
1 Like

Thank you! That worked perfectly.

Now- Is there a way (I’m sure there is, I’m sure it’s obvious, and I’m sure I’m missing it) to make the HorizontalRepeater taller?

EDIT:
Yes, there is. Disregard. Just had to sleep on it, apparently.
For future forum visitors, the way I did it is simply add min-height: 100px to the .anvil-role-horizontal-repeater>div section.

3 Likes