- 19 Jan 2023
- 6 Minutes to read
- Print
- DarkLight
Positioning and Sizing Elements
- Updated on 19 Jan 2023
- 6 Minutes to read
- Print
- DarkLight
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.
|
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:
Element 1
| Element 2
|
Sample design | Sample report |
How to place three objects side by side spread evenly across the page with margins to align on top?
Element 1
| Element 2
| Element 3
|
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