Hi,
Thanks @domivax for the super helpful explanation! I will elaborate on this matter a bit.
Typically, docking is between the element and its parent. So you are defining the distance from a side of the parent where the element should be positioned.
Since this docking relationship is only between the element and the parent container, you will find that collapsing another element in the container will not change the position of the other element.
Here is an example of what happens when you collapse elements that have no relationship between each other.
In Edit mode:
The container is docked 150px from the top with another container above it
In Preview:
No matter what happens to the container above the container will always be docked 150px from the top, therefore leaving a blank space.
Solutions
The goal is for the position of the elements to have a relationship between each other.
#1 Place elements in a stack. (Only works for vertical layouts)
This will create margins between the elements instead of the section, so when one is collapsed the other one moved.
#2 Create a grid that the size of the grid is dependent on the content inside.
Use “auto”, “min-content”, and “max-content” to have the rows and cells collapse when the content is collapsed.
Note: you should set the height of the container or section to “auto” height as well.
#3 Use a layouter and collapse the item
When you collapse an item the other items will adjust.
I hope this information was helpful.