Effect of Resizing Elements on Page Layout
When you add code to your site, the height of your page elements can change due to expanding, collapsing, or dynamically resizing elements. These changes can affect your page layout and the overall height of the page.
This article explains the rules that determine when and how changes in the height of page elements affect your layout, helping you control how your page looks in different situations. Note that these rules only apply to elements that are above/below one another on the page.
Why elements shift on a page
Elements on page can shift due to other elements:
- Collapsing or expanding.
- Growing to accommodate more content.
Elements on a page don't shift due to animations, or other elements being hidden or shown.
In this context, a page footer acts like an element if an element above it collapses, expands, or grows.
- To remove an unwanted gap between your footer and the last element on the page, double-click the footer handle.
- If you can't see elements at the bottom of the page and they aren't hidden, double-click the footer handle to increase the page size to include all the elements.
Collapsing and expanding elements
When an element collapses, the elements below it can either move up to take its position or remain where they are. This behavior depends on the following factors:
-
The size of the gap between elements.
If the gap is 70 pixels or less, the gap disappears, causing the element below the collapsed element to shift up. If the gap is greater than 70 pixels, the elements below stay in place. Similarly, when an element expands, the elements below it move down if the gap is 70 pixels or less; otherwise, they stay where they are.Calculating the gap between elements
The gap is the distance from the bottom of the higher element to the top of the lower element. In order to calculate the gap, you must know the exact size and position of each element. You can see this information in the Wix Editor Toolbar.
To calculate the gap:- Find the bottom edge of the higher element by adding its Y value to its height. In the example below, the blue element is positioned at 150 pixels and has a height of 50 pixels, so its bottom edge would be at 200 pixels (150 + 50).
- Calculate the gap by subtracting the bottom edge of the higher element from the Y value of the lower element. In the example below, the purple element is at 250 pixels, so the gap is 50 pixels (250 - 200).
We use the same process to find that, in the example below, the gap between the purple and green elements is 100 pixels.
-
Whether there is an anchor directly above the collapsed elements.
If an element directly below an anchor collapses, the elements below don't move up to take its place.
Knock-on effect
When an element collapses and the element below it has a gap of less than 70 pixels, it moves up. Then, if the gap between this element and the one below is greater than 70 pixels, the one below stays in place. Otherwise, it moves up to maintain its gap from the element above.
Similarly, when an element expands and the element below it moves down, if the gap between this element and the one below is greater than 70 pixels, the one below stays in place. Otherwise, it moves down to maintain its gap from the element above.
Example: A 50px gap and a 100px gap
In the image above, the gap between the blue and purple elements is 50 pixels. Since this gap is less than 70 pixels, when the blue element collapses, the purple element moves up.
However, the gap between the purple and green elements is 100 pixels. Since this gap is greater than 70 pixels, when the blue element collapses, the purple element moves up, but the green element does not move because of the larger gap.
Example: A 50px gap and another 50px gap
In this example, both gaps are 50 pixels. Consequently, when the blue element collapses, both the purple and green elements move up into the space previously occupied by the blue and purple elements, respectively.
Growing elements
The height of an element can increase when its content increases. For example, elements connected to a dataset may need to expand to display additional information. When an element grows, the elements below may move down to accommodate the extra space:
-
Gaps that are 70 pixels or less are maintained.
Elements 70 pixels or less below the growing element maintain the size of the gap. For example, if the gap started at 50 pixels, it stays at 50 pixels, regardless of how much the higher element grows. -
Gaps that are more than 70 pixels shrink until they reach 10 pixels.
If the gap is initially greater than 70 pixels, the elements below the growing element do not move, unless the gap would shrink to less than 10 pixels. In that case, the element moves down to maintain a 10 pixel gap.
Knock-on effect
When an element grows and the element below it moves down as a result, and the gap between this element and the one below is greater than 70 pixels, it doesn't move unless that gap falls to less than 10 pixels, in which case it maintains a 10 pixel gap. If the gap is 70 pixels or less, the gap is maintained.
Vertical overlap
The rules in this article do not apply to elements positioned next to each other. However, if the lower element overlaps vertically by more than half, meaning its top edge is higher than the vertical middle of the higher element, it does not affect the elements below it when it collapses.
For example:
On the left side, the purple element does not overlap vertically with the blue element. Therefore, because the gap between the purple and green elements is less than 70 pixels, when the purple element collapses, the green element moves up.
However, on the right side, the purple element overlaps vertically with the blue element. Therefore, regardless of the size of the gap between the purple and green elements, when the purple element collapses, the green element is unaffected.
Container boxes
A container box is an element that contains other elements. Elements attached to the same container box affect each other, as do different container boxes. Elements attached to different container boxes do not affect each other.
Grouped elements
When elements are grouped together, they behave as a single element. This means that if an element above the group collapses, expands, or grows, all elements in the group move together. Similarly, the rules apply if the group itself collapses, expands, or grows.
The top of the group is equal to the top of the highest element in the group, while the bottom, right, and left of the group are calculated from the lowest, right-most, and left-most elements, respectively. These values are used to determine gap sizes and vertical overlap.