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.

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

Check out the horizontal scroll here.

Showing  overflow.

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

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

Creating 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

Hiding 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. Go to Overflow Content > Hide. Use the drag handles to resize and notice that some of the content is clipped and you can’t see it.

03

Showing content on scroll. Go back to the Inspector panel > Overflow Content > Scroll. And then set the Scroll Direction to Vertical. Now, 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.