[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 🙂

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

[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?

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

[Phuc]

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

[Leo]

Sounds good.

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

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts