Alignment Problem

I’m having an alignment problem with a repeating panel. Here’s the template form:

Here’s the template form in the repeating panel on the main form:

Finally, here’s the form at runtime:

Notice how the “Delete” link on the far right doesn’t vertically align with the other elements of the form (Name & Active).

The spacing on all the elements is set to None. Bug? Or am I doing something wrong?

Hmm…just recreated (visually) here and it’s all aligned for me.

Any chance you could share your project and I’ll take a look?

EDIT -
here’s what I did : https://anvil.works/ide#clone:4YCS4PR7E4JPRQXW=4RI5D3IBIDSKOEDPFCBGJUJJ

Link to project sent via email. Thanks David.

No mail received. Sent you a PM.

OK…not there yet but interesting observation.

If you inspect the element in the browser dev tools, the bounding rectangle for the link is 48px high, whereas all the others are 34px high. The link is properly centred within that box but because the box is bigger it appears lower.

This is going to be something to do with the dashboard theme’s HTML/CSS. I don’t know exactly what yet, but I’ll let you know as soon as I do.

I don’t think it’s anything you are doing.

Ok, thanks David. I thought it was probably an Anvil bug :slight_smile:

@meredydd & @daviesian

This visual error is in the Dashboard layout. In this sample app, Form1 is just a plain form and the visual error does not exist. Form2 uses the dashboard layout and the same repeating panel, and you can see the link is shifted too far down.

https://anvil.works/ide#clone:4YCS4PR7E4JPRQXW=4RI5D3IBIDSKOEDPFCBGJUJJ

If I get a chance I’ll look deeper but I’ve not got enough time this afternoon.

Nice catch! Moving to Bug Reports.

Thanks so much Meredydd!

So, it turns out this is a bug…but it’s one we fixed quite some time ago! Looks like you created that form before the fix. If you create a new form with the Dashboard layout, you’ll discover it doesn’t have the same problem. Steps I would recommend:

  1. Create a new form, with the Dashboard layout

  2. Edit this form’s Custom HTML, press Ctrl+A to select all of it, then Ctrl+C to copy it to the clipboard

  3. Go back to your original form. Edit its HTML. Ctrl+A, then Ctrl+V to replace the original form’s HTML with the HTML from the new form.

Abracadabra, your Links should display correctly. Hope that helps!

Done! Alignment problem gone! Thanks Meredydd!

1 Like

Looks like you created that form before the fix

erm…I’ll try again, but I’m pretty sure i created that test project a few days ago (don’t think I used an old one??) and it was faulty there.

Might, of course, be going mad …