When we look at the results so far, we will notice that it looks very unorganized (as seen in the following screenshot). The objects are all over the place and are not aligned with the background. Of course, this is not very convenient for the user,
so let's see how we can solve it.
To select a single object, simply click on its caption. To select multiple objects, activate all of them by either clicking and dragging around them with the mouse cursor ("lassoing"), or by clicking on their captions while keeping the Shift key pressed.
Objects (or a selected group of objects) can be moved by clicking on the caption bar and dragging them to the desired location. Objects without a caption (for example, the listboxes showing Year, Quarter, and Month that we created earlier) can be dragged by holding Alt and clicking and dragging anywhere on the object. This method also works for objects with a visible caption, and even for objects where Allow Move/Size is disabled.
Holding Ctrl while pressing the arrow keys moves the active object(s) 1 pixel at a time. Use Ctrl + Shift to move them in 10-pixel steps.
To resize an object, click and drag one of its edges (left, right, top, or bottom) until it fits the required size. You can also use any of the object's corners.
To resize more than one object at once, activate all of them. When resizing one of the selected objects, all of the selected objects will adopt the new size, either vertically, horizontally, or both.
Resizing a multi box can be somewhat tricky. Unlike the other sheet objects, if we click and drag one of the object's edges, we can get unexpected results. For example, if we click and drag the right edge and try to make the object smaller, we will, in fact, make it smaller in size but a scrollbar will appear, meaning some part of the object has actually been hidden.
If, on the other hand, we click and drag the right edge and try to make the object larger, it will result in no apparent change.
The key to resizing multi boxes lies in resizing the cells instead. A multi box can be broken into cells, one containing the field label and one containing the field values. By placing the cursor on the right edges of those cells, rather than on the edges of the object, we will be able to click and drag to resize them and, at the same time, resize the entire object.
Hover over the left side of the drop-down icon and watch for when the cursor changes its shape. Click and drag to resize the Label cell. Hover over the right edge of the value cell to resize it as well. Resizing cells can be a bit "fiddly," moving the mouse just a little bit may switch between resizing the cell and resizing the object. The following image shows which cursor is associated with which action:
To align the objects on the screen, activate the desired objects and use the aligning buttons in the design toolbar. Right-clicking on any of the selected objects also brings up the alignment options, seen in the following screenshot:
If the design toolbar is not shown in your tool dock (it is turned off by default), you can enable it by selecting View | Toolbars | Design from the menu.
Let's tidy up our current dashboard using the previously described methods. See if you can get the end result to look like the following screenshot:
You may notice in the screenshot that I made some other changes. Besides aligning and sizing the objects, I also fixed the following things:
- Removed the border from the Search box.
- Changed the fixed number of columns from the Quarter listbox to
4. - Changed the fixed number of columns from the Month listbox to
12. - Added a caption to the Traffic per Year chart.
- Right-aligned the expression labels in the Top 10 Routes chart.
See if you can apply these changes as well.