Table of Contents

How to Move Elements on a Form

Overview

There are three separate ways of moving elements in the editor: Click and Drag, Nudging, and Spatial Input.

Click and Drag

Click and drag is the only way to move an element to a new parent container. When an element is moved to a new container, it will flash a bluish grey colour.

Dragging an Element to a New Parent Container

Click and drag is the only way to move an element to a new parent container. When an element is moved to a new container, it will flash a bluish grey colour.

In the case that the element is dragged over 2 containers, the will become the child of the container that it most overlaps with.

In this case, the element became the child of the container on the right.

If multiple elements are selected and moved into new containers, the new parent container will be evaluated individually.

In this case, the left Textbox became a child of the left container, and the right Textbox became a child of the right container.

Multiple Selected Elements

Moving elements by click and drag is compatible with having more than one element selected. To select more than one element, hold down the Ctrl key as you click the next element.

Nudging

Elements can be moved by clicked and selecting the element, and using the arrow keys to move the element. Each arrow key press translates into a 1 pixel shift for the element. The arrow keys can also be held down to move the elements more quickly without the use of a mouse.

Nudging is an one of the methods of moving elements a precise amount, along with moving groups of elements together without risking changing the element hierarchy.

Nudging Keeps the Same Parent

While nudging an element, it will always remain as a child of its current parent element. Moving the element outside of the bounding box of the parent is possible using this method. The use of this ability should be limited, as when an element is outside of its parent, it becomes easy to click and accidentally drag an element, changing its parent element.

When an element has been moved outside of the parent element in this way, you will receive this warning:

Multiple Selected Elements

Moving elements by nudging is compatible with having more than one element selected. To select more than one element, hold down the Ctrl key as you click the next element.

Tips

You can use Nudging to quickly determine with elements are children of a specific container. By selecting a container and rapidly nudging left/right or up/down, you can see which other elements are also nudged. As long as you hit both opposite directions the same number of times, you will not change the position of the element.

Spatial Input

Elements can be moved by inputting an X and Y position into the Spatials panel in the Accordion Menu. The number inputted represents the number of pixels from the top left position of the parent element. After inputting a position, you must press enter with one of the inputs selected to apply the new values. The input borders will thicken when the value has been successfully applied.

Inputting position using Spatial Input can be helpful when laying out a group of aligned elements that must match in the X or Y position exactly. A common technique is to copy a position axis number, select an element, paste in the number. If you move down a line of elements quickly using this technique, you can rapidly align a group of elements.

In the example above, all of the Textboxes were selected, and the same X value of 105 was applied to each one. Achieving this level of rapid updating can be difficult with the other methods.

Spatial Input Keeps the Same Parent

While inputting a position in the Spatials panel, the element will remain as a child of its current parent element. When an element is moved in this way, it may flash with the blueish grey colour, but no change in hierarchy has occurred. Moving the element outside of the bounding box of the parent is possible using this method. The use of this ability should be limited, as when an element is outside of its parent, it becomes easy to click and accidentally drag an element, changing its parent element.

There will be no warning when an element has been moved outside of the parent element using this method.

Multiple Selected Elements

Because the Accordion Menu disappears when multiple elements are selected, this method can not be used when more than one element is selected.