Customize element size, layering, and alignment in reports (Beta)

You can customize the layout of your report by rearranging, resizing, layering, and aligning elements. This document covers how to change element size and position, change the layering of your elements, and adjust the distribution and alignment of elements.

For more information about customizing element background and style (such as corner shape or padding), see Customize element background and styles. For more information on reports in general, see Reports overview (Beta).

User requirements

• You must be assigned an account type with Create, edit, and publish reports permission. See Account type and license overview.
• You must enter Edit mode to configure the following.

Change element size and position

You can edit element size and position at the pixel level to meet design and compliance requirements.

Resize elements

There are two ways to resize elements:

• Specify dimension in pixels: Select the element, then select the Format tab in the editor panel. In the Size section, enter your desired Width and Height in pixels.
• Select and drag: Select the element and then select one of its handles. Drag the handle until the element is your desired size.

Position elements

There are three ways to reposition elements:

• Specify position in pixels: Select the element, then select the Format tab in the editor panel. In the Position section, enter your desired X and Y position in pixels. The (0, 0) position is at the top left corner of the page canvas and respects any configured page margins.

• Drag and drop: Select the element. Drag and drop it at your desired position on the page canvas. If you want to move multiple elements at once, you can select the desired elements, and then select the (ICON) drag handle to move them as a group.

• Using arrow keys: Select the element and press the arrow keys on your keyboard to move the element by 1 pixel. Pressing Shift while pressing the arrow keys moves the element in 5 pixel increments.

Change element layering

You can change the layering of your elements in a report. Layering refers the order of how elements appear, and whether they are on top of or behind other elements. This can be useful when you want to create more depth in your report and have elements overlap, and also when reorganizing a complex page with many elements.

To change the layer that your element appears on:

1. Select your desired element, then select More.
2. Select Order, then select your desired layering position:
   • Bring to front: This brings the element to the topmost layer available.
   • Bring forward: This brings the element forward one layer.
   • Send backwards: This sends the element back one layer.
   • Send to back: This sends the element to the backmost layer available.

Align and distribute elements

When selecting multiple elements, you can use the alignment and distribution options available to create a clean and organized layout for your report.

1. Select multiple elements by clicking and dragging your cursor over the elements you want to select, or by pressing the Shift key and clicking on each element.

2. Select your desired alignment or distribution option.

   The following options edit only the alignment or distribution of options, not the size or shape of the elements:

   • Align left: Align selected elements by their left edge, following the X coordinate of the rightmost element.

   • Align center: Align selected elements horizontally by their center, using the mean of the elements' coordinates as the X coordinate.

   • Align right: Align selected elements by their right edge, following the X coordinate of the rightmost element.

   • Align top: Align selected elements by their top edge, following the Y coordinate of the topmost element.

   • Align middle: Align selected elements vertically by their center, using the mean of the elements' coordinates as the Y coordinate.

   • Align bottom: Align selected elements by their bottom edge, following the Y coordinate of the bottommost element.

   • Distribute horizontally: Redistribute elements to be spaced equally from left to right.

   • Distribute vertically: Redistribute elements to be spaced equally from top to bottom.

   The following options change element size as well as position and alignment:

   • Align elements horizontally: Resize elements to fill the selection box and distribute them horizontally with equal width.

   • Align elements vertically: Resize elements to fill the selection box and distribute them vertically with equal height.