[BETA] Form Design Issue With Links

Anvil Q&A
1

What I’m trying to do:
Put a link and a text box next to each other inside a column panel, using the beta IDE.

What I’ve tried and what’s not working:
Tried every way to drag & drop to make it happen, but I cannot. Either the text box becomes at one with the link or the text box drops below the link.

I have imported a project from the old IDE where I have successfully done this, but the new IDE (which I really really don’t want to stop using) just doesn’t let me do it.

I am using Chrome for Linux - Version 95.0.4638.69 (Official Build) (64-bit) - on a fully updated Ubuntu 20.4. The issue also happens in Firefox (which is unusable anyway for me with the new IDE as it’s too slow - reported elsewhere).

Clone link:
Here’s a test app which really just shows the components not where I want them. See if you can get the desired result.

https://anvil.works/build#clone:EPK7EQDUDF63ZGBB=5SKQNMK6CACG6OJ3RK3UNI7S

edit - I have found a workaround in the mean time. Put a label and a text box next to each other in the column panel (that works just fine), then put the link in between them, then delete the label.

Would be nice to get that fixed, though.

1 Like
2

If you put the link first, then the link will try to behave as a container and eat the label.

If you put the label first, then putting the link should work.

Trying to put two adjacent links is more difficult and may require putting a label first, then a link to the left, then a link to the right, then deleting the link. In some cases I ended up with git cloning, editing the yaml and pushing.

It would be nice if all the containers inside other containers had a little padding to allow dropping components in their parents. This could:

  • always be there and the form would not look exactly as at run time (there are other differences anyway, so it may not bother)
  • be there optionally, with a checkbook that turns it on and off
  • be there when the drag starts and go away after the drop
2 Likes
3

Be good if the link could tell the difference between having a component dropped on it and dropped next to it.

Agreed, that would be ideal, though a checkbox on/off showing the gaps would also work nicely.

4

To add to that workaround - sometimes it works better if you drop a button in first, then the link and label on either side of the button, then delete the button.