Page builder: How does height work

Example and layout explained

In this article, we're going to use the same example all the time, so let's start by explaining how the example is constructed.

The example looks like this:

This is a container (marked in red) containing four boxes (marked in yellow). The boxes have a black border and the container has some air to make it more clear in the example.

If I click on the first box in the container, you see in the navigation path in the lower left that "Box" is within a "Container".

An important clarification about the concept of height

In the page builder when we talk about "height" it really means minimum height. That is, if a box is set up to have e.g. 100 in height, it will actually mean that it should have at least 100 in height. When placing contents in the box, the box may automatically exceed the stated height. You'll get an example of this when I explain about "Customize side-by-side boxes and container"

Standard

By default, all boxes will follow the height of the container. If I select the container and drag the height adjustment point, the height of all the boxes will automatically follow. The reason this happens is that the container is set up to fill the height vertically.  

I can see this setting by pressing the container and in the menu on the right selecting "Content placement". In the "Content vertical" field, it is set up as "Fill".

If I change it to "Top" the boxes will use their own height. This applies to the "Top", "Middle" or "Bottom" settings. These options tell where in the container the boxes should be placed vertically.

Now I can manually adjust the height of all the boxes to make it look like this.

Manual height

In cases where you want to be very precise, you can adjust the height using numbers.
If I select box number two and select "Height" in the menu on the right, I will be able to see the height in pixels. There I can then enter the height I want.

Height Auxiliary Functions

In the menu on the right under "Height" there are three buttons to help you adjust the height. To demonstrate these I've added an image to box number four.

Fill container

If I press "Customize" the height of box four will be set to the available height in the container it is located in. It would then look like this:

Adapt to content

This button will adjust the height of the box to the contents inside the box. In this case, there is only one image inside, so then the height of the box will be the same height as the image.

Customize side-by-side boxes and container

"Side-by-side boxes," also known as "siblings," refer to all boxes on the same level as the selected item. If we select box 2 in our example, boxes 1,3 and 4 will be a juxtaposed box. 

If I select box 2 and press customize, the height of boxes 1, 3 and 4 will be set to the same height as box 2. In addition, the height of the container will be set to the same height as box 2.

As you can see in the picture above, a small problem has occurred (which is carefully planned). The reason why the height of box 4 is not the same height as boxes 1,2 and 3 is that the contents of box 4 take up more space and cause the box to be higher.

To solve this problem, I can tap on the image, and select "box" in the navigation path. Then you will select the box. We have to do it this way since the image and the box are the same height and it is then difficult to just select the box. 

Then I go into "Height" and hit "Customize" for "Customize side-by-side boxes and container".
The result will then look like this:

 

Boxes with multiple levels of content and different heights

Now I've modified the example of filling the boxes with an article and made various changes to make it look very messy. When creating pages, symmetry is important. We're now going to make this look nice again.

Issue 1: The text has different heights

Each story has a different amount of text, which causes the box around the text to require a different height. The solution to this is to adjust the height of each text box to the same height. We do this by choosing the text that has the greatest height. Here's what we can see here:

Box 2 contains the most text. If we then click on the text in box 2 and look at what the height is, then we can set the manual height to the same value on the other text boxes. Then you tap on the other boxes and enter the same value in the height field.

 

The result looks like this:

 

Issue 2: The boxes have different heights

The next problem is that the boxes now have different heights. This problem can also be solved in the same way as the previous problem. The only difference is that you have to adjust the height of the boxes and not the text.

We choose to solve it in a different way using "Adapt to content". We see that box 1 has the height we want to achieve, so we don't need to do anything about it. First, click on the article in box 2 and open "Height" in the menu on the right.  Since the article within box 2 is the same height as box 2, it is the article that is chosen. In the menu, tap "customize" for "Customize to content". I repeat the same process for boxes 2, 3 and 4.