Component spacing in Dashboard template

Bug Reports
1

Is there a way to close the gap between “rows”?
Even with the gap set to “none” each row is quite a distance away. This is fine for a handful of rows but I will be displaying lots for some tables.

anvil.png1024×408 9.29 KB

2

Hi David,

How are you constructing these rows? By default, each level of nesting produces padding. So if your Label is inside a ColumnPanel inside a Form, you’ll want to change the spacing_above and spacing_below values to none for the Labels, the ColumnPanels, and the row Form itself to get them closer together.

Does that help?

3

Hi David,

Just a quick note to say that this is now fixed and will be deployed over the next couple of days. We’ll be in touch at that point to describe how to get the fix into your existing app.

  • Thanks, Ian.
4

Its hierarchy is -

EDIT :
form -> column panel -> link x 2 -> 1 label in each link

all the spacing above & below are “none”

It looks like i need to reduce the height of the column panel but I cannot see an option for that, because if I highlight (using background colour) just the link container or the labels, they are quite thin. If I just put labels on the fomr, the gaps are still quite big.

5

I could try and create a custom template but it won’t let me on the demo.

6

Here’s the CSS that’s doing it - well, it might not be precisely the one but if I remove that 7px padding the rows are exactly as I would like them. Nested so deep though…

.cards .anvil-container .anvil-container, .designer .anvil-highlight .cards .anvil-container .anvil-container {
background-color: white;
box-shadow: 1px 2px 4px #888;
font-weight: normal;
font-color: #333;
font-size: 14px;
outline: none;
padding: 7px 0;

(app here : https://SPKNY2IJZR23YH6Z.anvilapp.net/FBUOOOFIXGTYNN2DTXSRXMVE)

7

Ah, thanks for all that detective work, it looks like this is a bug in our Dashboard template. I will make sure that gets fixed ASAP and keep you updated. Sorry about that!

[As with some other posts, this topic will probably be moved to our not-yet-created Bug Reports section. We’ll keep you updated about that, too.]

8

It looks like this is still an issue, is that correct?

9

Hi Chris,

I believe this was fixed last month, but the fix will only affect new apps. If you have an older app showing this problem, do get in touch at support@anvil.works and I’ll see what I can do to help you migrate.

Hope that helps!