Moving and Resizing Elements

In Design mode, any element on the screen can be moved or resized. The width or height of any element can be changed by dragging the side or top handles as shown.

Figure 1: Change Element Width

Figure 2: Change Element Height

Dragging any of the corner handles allows you to resize the width and height in one action.

Figure 3: Change Height and width of an Element

To move an element, simply click on it and drag it with the mouse. You can also click on an element and then move it using the arrow keys on your keyboard.  This is slower but allows very precise movement.

Figure 4: Moving an Element

Empty Elements

For simplicity of use, not all elements on a screen can be selected (or moved) by default.  One example is the background stripe element of a subfile row when the "Detect Subfile Patterns" option is not used.  In most cases, you would want to select the text in the rows of a subfile (for example to change the font), not the colored stripe element sitting behind it.  There are occasions where you do want to select these empty elements.  An example would be if you want to move an entire subfile to a different location on the screen.  Unless you select all the elements, including the empty colored stripes, only part of the subfile will move.

To enable selection of empty elements, right click on a blank part of the screen and select “Enable Empty Elements” on the shortcut menu.

Snap to Grid

The genie designer has a Snap to Grid feature which can be turned on or off.  When turned on, this feature will snap an element that you are moving to the nearest row and column allowing easy alignment with other elements on the page.  Turning this feature off will allow an element to be moved to any location in one pixel increments.

The design toolbar indicates the on/off status of the snap to grid feature.

It can be toggled on or off by clicking the button on the toolbar or right clicking on a blank part of the screen and selecting “Snap to Grid” on the shortcut menu.