In the Page Editor the menu on the left is an additional toolbar for editing items one by one or as a group (several items at a time). The panel has repeated settings for all elements.
Position
This is the location of the element relative to the boundaries of the Section. You can set numeric values in pixels or in percentages. The position of the element is calculated horizontally (scale X) and vertically (scale Y). Default values are shown in pixels.
To can change the value to percentage put a % sign in the value field.
The position of an element on a page is determined relative to the side of the section or center:
- Left – Start from the left side of the section.
- Right – From the right side of the section.
- Center – Position of the element in the center relative to the right and left side, as well as relative to the upper and lower edges.
- Top – From the top edge of the section.
- Bottom – The position of the element relative to the bottom edge of the section.
The position of an item within a group also has a position and can be changed by setting values in pixels or in percentages. In this case, the position will be calculated relative to the borders of the parent element. For example: the position of the text box inside the Form will be calculated from the borders of the form, not from the borders of the section.
Size
This is the size of the item itself. You can set numeric values in pixels or in percentages. W is the width of the element. H is the height of the element. The size of the element as well as the position can be adjusted in the section: by setting the size in pixels or in percentages.
If you set the value as a percentage, the percentage is calculated based on the section size. Width 100% and height 100% is the size of the section. At 100% the element will fill the entire section. If you specify 20%, then the element will occupy 20% of the section.
For more information on resizing an item, see the article "Aligning the item".
Tools
Copy item – You can copy the selected item or group of items.
Remove item – Delete the selected element or group of elements from the page. Confirm the action in the popup window before deleting.
Depth
This is an overlapping arrangement of elements. If desired, you can arrange the elements with an overlay and determine the sequence of layers. For example: the bottom layer is a picture, the top layer is a button. You can also lay out 3 or more elements in layers and adjust the position of each.
There are 4 buttons in the depth section:
- Move item down – Moves the item down one layer.
- Move item to the bottom – Moves an element under all layers to the bottommost layer.
- Move item up – Moves the item up one layer.
- Move item to the top – Moves the item to the topmost layer.
Alignment
This is the location of one or more elements relative to the borders of the section. The top group of buttons aligns the element at the bottom, at the vertical center, and at the top of the section. The bottom group of buttons aligns the element with the left edge, the horizontal center, and the right edge of the section.
If only one element is aligned, the alignment will be along the boundaries of the section. But if you select several elements, the alignment will be relative to each other, that is, inside the field of the selected elements. Highlighted items are outlined by a yellow line.
If we group several elements, it becomes possible to align the height and width of the group of elements. The entire group of elements will be aligned along the boundaries of the section. Grouped items are highlighted with a blue line.
