To position fields in the App Builder, Topo has 3 different kind of spacing settings for your fields:
- Children Spacing - Spacing of data fields inside a box
- Outer Spacing - Spacing around a box
- Inner Spacing - Spacing between data fields and a box
1. Log into your Topo account and activate the App Builder by clicking on "Enable Editing Mode" under Tools.
2. In "New" open a template you want to modify by clicking on and "Edit".
3. In our example report we have a box with Supplier Information. As mentioned before Children Spacing sets the space of all your data fields inside a box.
We want to add space between the 3 fields and the box, especially at the right section. To add space we need to enter pixel values and follow the direction of Top - Right - Bottom - Left.
If I enter 0(Top) 0(Right) 0(Bottom) 10(Left) into Children Spacing, we are adding a space of 10 pixels (Orange Box) to the left side of each data field.
Let's try to add space to the bottom and enter "0 0 15 10". Each data field now has a space of 15 pixels at the bottom (Blue Box) and 10 pixels to the left.
4. Outer and Inner Spacing follow the same principle and in our next example we want to insert space around and inside the information box.
5. Enter "20 5" in "Inner Spacing" and "30" in "Outer Spacing". The Yellow square (Inner Spacing) shows the space inside the box and the Green square (Outer Spacing) the space outside the box.
If you have the same spacing for Top & Bottom and Right & Left, you can enter two pixel values only. As you can see for "Inner Spacing", we added 20 pixels for Top & Bottom and 5 pixels for Right & Left.
For "Outer Spacing" we only added one pixel value and it will insert space on all sides Top-Right-Bottom-Left automatically.
6. In general, pixel values in Children Spacing, Inner and Outer Spacing will add up together in your design.
Example: You add 10 pixels for Inner Spacing in a box and Outer Spacing is 20 pixels. The total white space you have for your box is 30 pixels.