Multiple Selection

Multiple elements can be selected by dragging a “rubber band” around the elements using the mouse. The dotted rubber band occurs if you click on a blank part of the screen and drag the mouse diagonally over the elements you want to select.   

Alternatively, you can select multiple elements by holding down the CTRL key on your keyboard and then clicking on the required elements one by one.

There are a number of useful features that are available for multiple selected elements.

Multiple Move

It is possible to move all selected elements on the screen. Simply click and drag one of the selected elements with the mouse.

Alignment

If you right click a set of selected elements, there are several useful alignment options as shown below. These options allow you to quickly align and tidy up a series of elements on the page.  The element that you actually right click will be used as the standard that the other selected elements will be altered to.  For example, if you select “Make Same Width”, all selected elements will become the same width as the element you right-clicked when selecting the option.

Overlaying elements

If two or more elements are overlaying each other, you can decide which element is on top.  It is possible to right click an element and Send to Back or Bring to Front

Alternatively, you can change the z index property.  A higher z index will place the element closer to the top (forward).  The z index value can be a positive or negative integer. Z index is defined and controlled by the style sheet for your current skin.  By default, Genie will assign a z index of 10 to all output elements and 20 to all input elements.

Locking elements

It is possible to lock elements in place. This has two purposes.

First, by locking an element, you can avoid accidentally moving it while in design mode.

Secondly, if a panel element (Field Set Panel or Tab Panel) is locked, you are then able to select multiple elements inside the panel using the rubber band method.  This is particularly useful if you need to slightly move all elements within a panel.

Lock the Personal Details Field Set Panel.



 You can now select all the internal elements by dragging the mouse around the elements

.