Am I doing this wrong? - Form Design Alignment

Anvil Q&A
1

So I’m trying to get my different objects in design mode to align neatly. As show in the picture it isn’t going terribly well. Dragging the objects around is frustrating because they don’t move horizontally in the same way and they never align up perfectly. I use the spacer objects which help a lot but i still can’t get it to work quite like I want it each time. What is the best way to plan the layout of the form like I have in the screenshot when we want to have a mixture of boxes, dropdowns, labels and some alignment. This is way too frustrating and cumbersome so I’m thinking I might be doing this wrong here. I’m spending way too much time on this.

And to end on a positive note, the Anvil Editor in Beta is now much better than the previous version great job guys!

image
image1002×493 19.9 KB

2

Have you tried dragging the horizontal edges between components to change how much space they take up?

If you had (and just in general) and the normal dragging doesn’t give enough precision, you can try dragging while pressing Ctrl which will make the resizing more granular.

Another thing you can do to make it easier on yourself, is to add a column panel and add components vertically to that (I’m looking at your radio buttons in particular here).

1 Like
3

The control + really makes a huge difference as did the column panel! Thank you its a lot smoother now.

1 Like
4
  1. Ctrl+drag gives you finer control, so use it…
  2. … but you risk to introduce small errors that are more difficulty to fix, so don’t abuse it
  3. Double clicking on a separator resets the column widths for that row. You can use it when things get out of control after a few drags, so you can have a fresh start
  4. Areas like the radio buttons on the right are easier to manage if you put a column panel, then the radio buttons inside it
  5. Spacers… mmmh… I rarely use them. They often give you the feeling that things look good, but when you change the size of the page, everything falls apart
  6. I would love to be able to set the column sizes from the property panel, but it’s impossible. My workaround is to clone the git repository and edit them by hand. It’s difficult, but if you get used to it, it’s not impossible
1 Like
5

Hi Stefano,

Thank you for the golden tips, i’ll keep those things in mind and echo your point number 6.
On the subject of spacers, in which circumstance do you feel that it is beneficial?

Consider this example

image
image1009×100 1.98 KB

If you don’t add a spacer how would you reduce the size of that long email field? Even if I add that column spacer I am faced with the same dilemma. I tried adding two column spacers for the label and for the field but im always constrained that I cannot shrink the field from right to left and i end up having to resort to spacers.

6

Spacers are there because they can be useful. So, if you need them, use them. Just make sure the form works with different sizes.

An alternative in this case is to put the text box in a flow panel, so you can explicitly set the textbox size.

I use tons of flow panels. A justified one containing two flow panels, one left and one right is a common example that allows to get a few components on the left and a few on the right.

2 Likes