LESSON 16

Overflow content.

Control what happens when elements like images, text or buttons overflow the borders of a parent container. Overflow control works for regular containers, sections, repeaters and layouters. Select a section or container to control the overflow behaviour from the Inspector panel.

text on an image showing green, black and some red shading and shapes with an arrow facing right at the bottom

Check out the horizontal scroll here and resize the browser to see what happens.

image of side of green speaker on grey background
image with a grey background with green raised dots
image with a black and green shaded background
image with a black and green shaded background
text on an image showing green, black and some red shading and shapes with an arrow facing down at the bottom

Check out the horizontal scroll here.

small tool bar showing text with a dropdown, and icons of 3 different screens plus 3 dots next to it
Create a Grid
2 icons showing redo and undo actions, plus 1 other icon.
small tool bar showing text with a dropdown, and icons of 3 different screens plus 3 dots next to it
action bar showing 5 icons.
small tool bar showing text with a dropdown, and icons of 3 different screens plus 3 dots next to it

Showing  overflow.

Sections and containers are set to Show by default so that when content flows outside, it’s still visible on the site. 

image on the right of pale green dots on a grey surface. On the left, there is text.
Image on the right of pale green dots on a grey surface. On the left, there is text.

Hiding content.

You can choose to hide content if it flows outside the borders of its parent container, which means that site visitors won’t see it.

Showing on scroll.

To enable content to scroll, add all the content to the section or container and set overflow to Scroll. Then choose the direction you want the content to flow in, either Vertical, Horizontal or Both. You can hide the scrollbar using the blue toggle.

TRY IT YOURSELF

Exercise on overflow content.

​Open Academy X from desktop to complete this exercise.

01

Create an overflow. Select the text in the container. Click Edit Text and set font size to 40px. You’ll notice that the text is too long and flows outside of the container on smaller breakpoints.

02

Hide content. Click the container. The Inspector panel will open on the right. If it doesn’t, click the Inspector icon in the top right corner. Under Overflow content, select Hide. Use the drag handles to resize and notice that some of the content is clipped and you can’t see it.

03

Show content on scroll. Go back to the Inspector panel and under Overflow content, choose Scroll. Now set the Scroll direction to Vertical. Click Preview in the top right corner. Click Viewport in the top bar and a dropdown will open. Preview how the text looks on all breakpoints. Scroll vertically over the content to read more.

Editor X

The rest is up to you.

Label that shows that this page was created on Editor X