Row spacing in a grid/panel table display

Anvil Q&A
2

If the the standard layout options are not getting things close enough together, you can use CSS and roles to create custom spacing.

Here are the standard layout options which you can find in the IDE:
sc1

If you want to have more control over the spacing, create an Anvil “role” and set your template form’s outer container to have that role. The following CSS is associated with that role and is added to your theme.css file under “assets” in the IDE.

.anvil-role-thin_row {
 margin-top: -10px !important;
 margin-bottom: -10px !important;
}

This is the result of adding the role and associated CSS:
sc2

Here is a clone so you can see what I’ve done:
https://anvil.works/build#clone:RM3HLVZ77LR2FVGI=WYXG734O3QNGN774ZKEJN2CV

I’m no CSS expert, so feel free to Google other similar CSS options but this worked for me.

Not a direct answer, but if the gridlines are meant to make rows easier to distinguish, I like to alternate shades of gray. I do so by adding a little function to the form which holds the repeating panel (i.e., the parent form). The function is something like this:

# in init
self.color_rows(self.repeating_panel_1)

def color_rows(self, rep):
  for i, r in enumerate(rep.get_components()):
    if not i%2:
      r.background='theme:Gray 200'

The result is something like this:

image
image960×167 3.25 KB

The border property might also be useful to make grid lines more apparent if needed. Perhaps you could add something like solid black 1px to the “border” property in the IDE (in your template form).

I hope this helps.

3 Likes