[Resolved] Horizontal Scrollbar on align full items

[Phuc]

There’s a horizontal scrollbar, when setting default gutenberg blocks to full width.
You might not see this on the mac, because the scrollbar is only visible, when you scroll.
But on Linux and Windows it’s visible and caused by

.no-sidebar .entry-content .alignfull {
max-width: 100vw;
}

I don’t see a fix for this with this method. I don’t apply the default width to the container but to the items inside the container.

You can test it by yourself by setting the layout without sidebar

[Leo]

Hi there,

Try this CSS:

body {
    overflow-x: hidden;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Phuc]

I had the same idea, the problem is, that all the padding calculations are wrong, since the width of the scrollbar messes up the whole calculation. And all the browsers have different scrollbar widths.

[Leo]

That’s the only solution we have currently unfortunately.

I’m not sure about the padding issue though, can you apply it so I can see?

[Phuc]

True, I guess that wrong calculation happened, while I was trying to adjust the behaviour of the group blocks.

[Leo]

Sounds good.

[Greg]

I have run into this while considering whether or not to use GP on a new site. When the scrollbar is visible, the expectation is that “full width” does not include the scrollbar, because that is what causes horizontal scroll. Regrettably, 100vw includes the scrollbar. To fix the horizontal scroll, the left and right margins for .no-sidebar .entry-content .alignfull need to be calc((-100vw + 15px) / 2 + 100% / 2), but only when the vertical scrollbar is visible.

[Phuc]

The problem is, that you don’t know, when the Scrollbar is visible unless you use JavaScript.
Another way to solve this problem is to always show the scrollbar, even if it isn’t needed. But I wouldn’t suggest that.

[Greg]

@Leo When it comes down to it, GP is incompatible with alignfull, at least on systems that have scroll bars. Seems like something should be done about that, as it’s a standard WP feature.

[Tom]

Hi Greg,

There’s not much we can do about it. If the content area has a defined width, there is no way to break out of that width without using the code above, which isn’t perfect by any stretch.

The only “solution” is to:

1. Remove the defined width from the content so it’s a full width area.
2. Define the content width to everything inside the content except for align full items.

This isn’t a solution the theme can offer without major backward compatibility implications – it’s simply not worth it.

If you want to mix contained and full width areas on a page, you should:

1. Remove the defined width from the content: https://docs.generatepress.com/article/content-container/
2. Use a plugin like GenerateBlocks to add containers to your content so you can define the width for each section differently.

This is a way better method than using :not() selectors in your content to define a max-width to everything except for align full blocks in my opinion.

[Greg]

document.addEventListener("DOMContentLoaded", function() {

	/* Detect Visible Scrollbars */
	if ( window.innerWidth > document.documentElement.clientWidth ) {
		document.documentElement.classList.add( 'visible-scrollbars' );
	}

});

.visible-scrollbars .no-sidebar .entry-content .alignfull {
	margin-left: calc((-100vw + 15px) / 2 + 100% / 2);
	margin-right: calc((-100vw + 15px) / 2 + 100% / 2);
}

[Alok Sharma]

@Greg, I tried your solution, but it didn’t work.

@Tom, I am using Beaver Builder & Beaver Themer and I use full-width layouts for certain modules, and they work perfectly fine, no overflow at all.

I also tried full-width layout for a container block in Astra theme and overflow didn’t happen there as well.

Don’t know why it happens with GeneratePress only.

Apart from the following work-around, is there any other way to fix this issue?

body {
    overflow-x: hidden;
}

[Elvin]

Hi @Alok,

Can you open a new topic for this? so this topic doesn’t get to convoluted as the solutions proposed isn’t written for your site specifically.

Opening a new topic will atleast make sure the solutions is centered around the site you’re trying to fix. 🙂

Apart from the following work-around, is there any other way to fix this issue?

The other way to fix this is to try to find and fix the element that’s causing the overflow issue that creates the horizontal scroll you see. It’s a tricky one to do as this will require close inspection of the page’s content.

[Alok Sharma]

Hi,

Actually, the problem is very much related to this thread. I have anyway created a new topic:

https://generatepress.com/forums/topic/overflow-x-issue-with-full-width-container/

[Author]

Posts