Horizontal and 2D Repeating Panels
This library contains a Repeating Panel that repeats things horizontally rather than vertically. If the panel overflows the width of its parent, a scrollbar appears.
There’s also a 2D Repeating Panel that repeats horizontally AND vertically.
This library is completely free to use, so click on the clone link and use it in your app.
It’s based on some additional CSS rules, so you will have to add these to theme.css
in your app’s 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;
}
Once you’ve put those CSS rules in your app, you can include this app as a dependency and drag-and-drop Horizontal Repeating Panels into your app.
If you don’t want the scrollbars to appear, you can change the overflow
rules to hidden
instead. This will mean
the Repeating Panels are simply truncated if they are wider/taller than their parents.