nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Section scrollbar when using a page include

viktor klein

When I use a include page macro in a section, the page shows a horizontal scrollbar to the section.

This does not happen to include page macro when not using sections.

Is there a way to get rid of the scrollbar? Because I need sections for page layouy

Accepted answers

All comments

Thomas Schlegel

Hi Viktor,

the horizontal scrollbar is there because the width of the included page is bigger than the width of the section.

You can't disable that. If you would, you will lose content from the original page.

Have a look at your original page. Add line breaks and use smaller images, so that your page is smaller. If it is small enough to fit into your column, the scrollbar should go away.

viktor klein

Thank you for your reply.

I understand what you are saying, but the problem is a little more complicated.

A section takes up a little space, even when it is an single column section, for that reason all my pages that are included are using sections (or else they do not align).

So if I include them in my main page without a section in the main page all goes well.

Now the difficult part starts, if I now use an section in the main page use some column, in a different part, the single column section that contains the page-include now automatically adds a horizontal scrollbar, this because the extra (unnecessary) room needed for the section.

I understand what causes the problem (although I’m not too happy about it) but I do not like the work around that I’m using (not using sections in the main page). It provides my editors with overhead that is unnecessary.

So I was hoping there was a more straightforward solution. Or maybe I'm understanding the problem completely wrong (I really hope so)

François Coupal

Indeed, I have the same problem. I'm trying to build a page made-up of smaller pages, for re-use.

Each of the micro-page is like a single item, made-up of a single section of two columns (description on the left, code example on the right).

But in the main page, i have to use sections to correctly format and align various sections, and then list a few of the micro-pages.

I think the quick solution (as a new feature request) would be for the included page to replace the single column section it is declared into, thus eliminating the need for the scroll bar in the containing section.

I created a feature request for this.

Link to Feature request

Andrew Pirkola

It is not strictly true that the scrollbar only appears if the included page is wider than the section.

If the included page has sections of any kind, the scrollbar appears.

The screenshots I've attached demonstrate that the amount of content on the source page is irrelevant...if it has sections.

Scenario 1 - source page has multiple sections

My source page with very little content. Page with sections.png

The page that has the include page macro gets a scrollbar in the section containing my source page.

Included Page with Sections (has scrollbars).png

Scenario 2 - source page has only one section

Here my source page has the exact same content, but only in one section. Page without sections.png

Now, the section of the page with the "include page" macro does not get a scrollbar. Included Page without sections (no scrollbars).png

shehzad.iqbal

We are facing the same issue here. Is there any bug fix request for this?

Vasil Nikolov_r9apjl

This looks like a bug, i'm experiencing it in latest version and it's pretty annoying

EJ Hunyadi

Same here. It's made page includes unusable for us.

juan.romero

I've tentatively added the following CSS snippet to the global stylesheet under /admin/editstylesheet.action and it seems to work fine:

[data-macro-name="include"] { width: 99%; }

Kel Hill

Good to know, but sadly, styling is not possible in Confluence Cloud.

Rachel Wilson_2mi7gn

THANK YOU FOR THIS! That helps a lot.

Adding where to go in a space if your not a global admin or have access to the global stylesheet.

Go to Space Tools > Look and Feel > Stylesheet
Then click Edit, and add the code above.

Worked like a charm for me!

The CSS works great!

The only problem is that in Edit mode, the macro becomes HUGE.

So you probably want to keep this at the page or space level, and make sure that users are aware that Include page is special.

Update:

The macro displays as huge when using the space's Stylesheet.

When using the (Adaptavist) CSS macro on the page where the Include page macro is located, it behaves normally (and does not show the unwanted horizontal scrollbar).