Positioning and Sizing Elements

Intro

ancoreShare Extension gives you complete flexibility to add multiple Qlik Sense visualizations, text elements, and lines to your report for customizing it according to your business needs. 

To help you place your elements on the page and create a pixel-perfect report, ancoreShare comes with multiple properties. This section explains the most important properties for positioning and sizing elements and how they interact to bring out the best design for you.

If your element is within a cycle section, please refer to details in Positioning elements within a Cycle.

Working with ancoreShare Extension properties 

By default, all elements are positioned from top to bottom, one below another, and left-justified on the page. 

The default size for Object elements (charts and tables) is in the ratio of their respective Sense visualization object size on the Sense sheet.
The default width of Line and Text elements is 100% of the page.

The following images show how the default positioning works for elements on the report. The image on the right shows a sample report, as seen in the preview window.
NOTE: We have enabled borders to see the space taken by each element clearly.

Design sample

Sample report

As a designer, you can specify an accurate position for each element. For this, you need to combine the Anchor, Size, and Spacing settings.
Besides those three most important properties, some additional settings affect the position of an element. These are Body/Header, Print on new Page, and Alignment.

Anchor

The anchor defines the relative position of an element to its preceding element.

As mentioned above, the elements are always anchored bottom, such that they are placed one below another, left-justified on the report page.

An element can either anchor at a reference point (top-left, top-right, bottom-left, bottom right) or a reference line (top, left, right, bottom, max bottom) provided by the preceding element. As the anchor is always relative to the preceding element, it is not needed for the first element, as it's always in reference to the top left corner of the page. Only from the second added element on (in order of segments in the properties panel), the anchor setting is available.

Going out from there, the element only further shifts in position through the spacing property.

Here's an image showing the various anchor positions.

The following images show how an element is placed right next to its preceding element, using the Anchor as top right. The image on the right shows a sample report, as seen in the preview window. Note that we have enabled borders to see the space taken by each element clearly.

Design sample

Sample report

Max bottom anchor

As an exception, the Max Bottom anchor takes into consideration all the preceding elements. All other anchors only take the very previous one element as a reference for anchoring.

To place an element beneath all other preceding elements, use the anchor position as Max Bottom.

Sample design

Sample report

Size

The Size Type can be set as automatic, a percentage of the full page width, or you can define a specific value. When you specify a numeric value, the unit is always set as the page unit defined in the Page Settings.

You will see the following options in the Properties panel. Automatic: The object element will be sized according to the ratio as on the Sense Sheet, reflecting the grid in Edit Mode. Text and Line elements will span over 100% of the page width. Percentage of page size: The element will take the width and height as a percentage of the report page. Numeric value: The element will be sized to this value, measured in the page unit.

Now, let us look at some examples to understand how you can work with size types.

Example 1
The following images show objects placed with size type as Automatic. The image on the right shows a sample report, as seen in the preview window. Note that we have enabled borders to see the space taken by each element clearly.

Design sample

Sample report

Example 2
The following images show objects placed with Size Type as Percentage of page size set at 50. As you can see, both the elements take 50% of the page width, while maintaining the aspect ratio. The image on the right shows a sample report, as seen in the preview window. Note that we have enabled borders to see the space taken by each element clearly.

Design sample

Sample report

Spacing

Spacing defines the distance around an element top, left, right, and bottom to it's neighboring elements. Elements always affect and complement each other. 

By default, the spacing is set as 5 points at all sides of an element.
The behavior of spacing depends on the selected size type:

• If the Size Type is set as Automatic or Percentage of page size, then the spacing will act as a padding and affect the visual size of the object.
• If the Size Type is set as Numeric, the spacing will act as a margin and affect the actual position of the object.

Here are a few examples showing how spacing works to scale or shift elements:

Example 1: Spacing set to 0 for both elements. 

The following images show elements placed Spacing set as 0 for the elements. The image on the right shows a sample report, as seen in the preview window. Note that we have enabled borders to see the space taken by each element clearly.

Sample design

Sample report

Example 2: Size Type: Percentage of page size, and Spacing specified for top and left.

The following images show elements with the Percentage of page size set as 50% in the Size Type. Spacing is specified for top and left. In this case, the object content scales according to the inputs.

The image on the right shows a sample report, as seen in the preview window. Note that we have enabled borders to see the space taken by each element clearly.

Sample design

Sample report

Example 3: Size Type: Numeric, and Spacing specified for top and left.

The following images show elements with the Size Type set as a numeric value. Spacing is specified for top and left. In this case, the element shifts according to the inputs.

The image on the right shows a sample report, as seen in the preview window. Note that we have enabled borders to see the space taken by each element clearly.

Sample design

Sample report

Other position settings

These are the further settings that affect the position of an element on the report.

Body/Header

The region defines if an element is positioned in the header or the body of the report document. Any element placed in the header will be repeated on each page of the report (except for true table objects).
You can also specify the alignment of elements inside the header.

Print on new Page

Whenever this setting is selected, the element will start at a new page in the report.

Alignment

It defines the horizontal orientation of an element considering the total width of the page, irrespective of any other elements on the page.

Cycling

If your element is within a cycle section, please refer to details in Positioning elements within a Cycle.

Working with settings for complex designs

As mentioned above, the Anchor, Size, and Spacing settings interact with each other to help you create custom designs for your report.

Here are some examples showing how you can work with these settings.

How to place two elements side by side, horizontally spread evenly across the page?

To place two elements parallel to each other, evenly spread across the page, make the following settings:

Sample design

Sample report

How to place three objects side by side spread evenly across the page with margins to align on top?

Sample design

Sample report

Next Steps:

• Learn more about working with the Preview Window
• Or have a look on how and where to share and export your report