Row spacing in a grid/panel table display

I think I’ve figured out how to use this properly, data grid, with an embedded repeating panel, loads from table… all good. And formatting the template is working, however, the spacing you see below is not using the real estate like I’d like to. How to force my rows closer together, and add gridlines?

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:

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:

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

I usually set all spacing above and below to none, for labels, links and containers. But the biggest difference is made by setting the label roles to text.

Can you elaborate please?

Sorry, I replied from the cell phone and I didn’t add any details.

If you select each label and link on the row template form and set its role to “text”, they will have smaller top and bottom padding:
image

3 Likes

I did not know that, thanks :slight_smile:

Component spacing is always a compromise. It seems that defaults are set so that mobile users (no mouse, only a “fat” fingertip) with a tiny touchscreen can still make things work – provided that the page layout was simple (and sparse) to begin with.

campopianoa’s CSS/HTML solution worked perfectly for me

Hello can be possible to have an exampe without using enumerate but only the item name on datatable example on datatable yes or no if yes make color else no
Thank you!