Horizontal scroll

Anvil Q&A
1

I’ve got a question if it’s possible (pretty sure it is, question how) to have a horizontal repeating_panel and a table scrollable horizontally? I am looking to build a data wall which would look pretty much like the database, just a big table with some number of columns - too many to see them all on the screen. Would it be possible to scroll it to the right?

2

Hi Izabela,

You can do both of those things - make a RepeatingPanel repeat horizontally, and allow things to scroll to the right. Here is an example:

https://anvil.works/ide#clone:3B46KWADVAC2ITXQ=7VW5UTGVQUF3DN2G3XKVDX2J

To make the RepeatingPanel repeat horizontally, I have added the following custom HTML to the form that it’s on:

<style>
  .horizontal-repeater .repeating-panel {
    display: flex;
  }
  .horizontal-repeater .repeating-panel>div {
    min-width: 200px;
  }
</style>
<div class="horizontal-repeater" anvil-slot="default"></div>

And to make the whole card horizontally-scrollable, I have added an Anvil ‘role’ class to the theme CSS:

/* This is the new 'role' class'. Any component 
with the role "horizontal-scroll" will get this class */
.anvil-role-horizontal-scroll {
  overflow-x:auto;
}

And then given that role to the ColumnPanel containing my data:

self.column_panel_1.role = "horizontal-scroll"

I hope that makes sense. Do explore the code in that example, and let me know if anything is unclear!

3 Likes
3

So - this means we can add our own classes to components. Nice.

I was going to get around to asking about the “role” but never quite did :slight_smile:

4

This will be documented properly very soon. At the moment you still need to add the role through code, but we’ll shortly have a mechanism to create them in the theme and assign them in the property editor. Watch this space!

2 Likes
5

This is a great example - thanks! How would be go about freezing the header and also first two columns on the left? I tried doing that with a separate repeating_panel on the left hand side and assigning role to the repeating_panel on the right hand side only, but the scroll is still across full content.

6

Hi daviesian, I’m trying to replicate your example. When I run the app, this is what it looks like:

21%20AM
21%20AM1193×527 14.9 KB

Am I doing something wrong or is this what it’s supposed to look like?

7

Hi Stephen,

The structure of the RepeatingPanels has changed a little since this example. Try using this stylesheet in the CustomHTML Form:

<style>
  .horizontal-repeater .repeating-panel {
    display: flex;
  }
  .horizontal-repeater .repeating-panel>div {
    min-width: 200px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .horizontal-repeater .anvil-panel-col {
    min-width: 200px;
  }
</style>

(You don’t need to use a Role in this case either.)

Here’s an example app where I’ve made a Horizontal Repeating Panel as a custom component, so you can just drag-and-drop one from the Toolbox:

https://anvil.works/build#clone:ASBEEX5OQEEMOXJS=NU7C2L4A72GQS37PMRJ6H6HE

Here’s what it looks like with the items set to range(1,100):

image
image.png1002×200 4.99 KB

3 Likes
8

Thanks for the tip! I’ll let you know if I encounter any problems with your solution.