Archived topic

Unwanted horizontal scrolling when inserting Gutenberg full-width block

15 replies · Started by Marius on January 23, 2020

Viewing posts 1–15 of 16

January 23, 2020 at 12:12 pm #1141866

Hi,

When inserting a full-width Gutenberg block (e.g. "Columns"), and leaving "Page Builder Container" at "Default" and setting Sidebars to "Content (no sidebars)", it is possible to scroll horizontally by a few pixels (the browser does not show any horizontal scroll bar, however, so you have to scroll with, say, your touch pad, or using a plug-in such as "ScrollAnywhere"). I've attached a link to an example page for the GP staff.

January 23, 2020 at 1:07 pm #1141904

Hi there,

Try this CSS:
https://generatepress.com/forums/topic/uagb-block-width-issue-with-no-sidebar/#post-1122137

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

Let me know if this helps :)

January 23, 2020 at 1:16 pm #1141916

Hi. Thanks for your response. However, it didn't help. You can verify it yourself (on the same link I originally provided - I added the CSS from the post you suggested).

January 23, 2020 at 1:48 pm #1141934

Can you try this?

body {
    overflow-x: hidden !important;
}

January 23, 2020 at 10:42 pm #1142221

I updated the page. Nothing changed. Horizontal scrolling is still possible, as you can verify for yourself. Does the problem even occur for you? It happens in Firefox and Chrome for me, also on different machines.

January 24, 2020 at 9:08 am #1142805

Can you try this, instead?:

html,
body {
    overflow-x: hidden;
}

January 24, 2020 at 10:52 am #1142927

Hi, unfortunately, the problem still persists. Also when adding !important. I've updated the site.

January 24, 2020 at 11:34 am #1142975

I'm not seeing any horizontal scroll right now. Can you try clearing your browser cache?

January 24, 2020 at 12:14 pm #1143014

The problem is still there. I always use private browsing for testing. I've also cleared the cache, but that makes no difference, since I can see that the CSS snippets that you provided are, infact, active (in the developer tools of the browser). The problem can be reproduced with Chrome and Firefox, on the sample page (path: wordpress-test/sample-page/), using e.g. the "Scrollbar Anywhere" browser add-on. It's not reproducible just with a normal mouse or the track pad, as I've just found out. When using Scrollbar Anywhere, hold the right mouse button and move the mouse left and right.

Using the web development tools, I believe the reason is that the div that spans the full-width content, here: <div class="wp-block-columns alignfull"><div class="wp-block-column">...</div>, is a bit wider than the rest of the page (on my machine: that div has a width of 1920px, while the rest (e.g. <html>) just has 1903px, probably due to the horizontal scroll bar occupying 17px). Presumably, this gives Scrollbar Anywhere the justification to scroll horizontally, because there is still content.

With other themes (e.g. twentytwenty), horizontal scrolling is not possible.

January 24, 2020 at 4:58 pm #1143141

Ah, so this is only happening when you use that Scrollbar Anywhere browser extension?

I'm not sure if it's possible to prevent that, if so. Telling the site not to scroll horizontally (which is what that CSS above does) is the best way to fix this when it arises.

Another option is to not use the Align Full option (which uses CSS to force full width), and use the "Full Width" option in our Page Builder Container control.

January 25, 2020 at 5:19 am #1143470

Yes, it only happens with the Scrollbar Anywhere extension. But that doesn't mean that it is not a problem.

Using "Full width" in the Page Builder Container control did not help.

I finally found a fix for it, anyways. As I said in my previous post, the real reason seems to be that the div that wraps the full-width block is too wide (wider than html). I found that the weird calc() calls you inserted for margin-left and margin-right in the GP theme for .no-sidebar .entry-content .alignfull are to blame.

In other words:

.no-sidebar .entry-content .alignfull {
	margin-left: auto; /* was: calc(-100vw/2 + 100%/2);*/
	margin-right: auto; /* was: calc(-100vw/2 + 100%/2);*/
}

fixes it.

January 25, 2020 at 9:26 am #1143868

Does making that change still allow the block to be full width?

January 25, 2020 at 1:50 pm #1144063

Yes, the block has no margins whatsoever, it seems to fully span the entire width of the page.

January 25, 2020 at 4:27 pm #1144149

The content is full width now because you're using our "Page Builder Container" option. You can actually just remove the Align Full alignment from the block and it will continue to work as it is now :)

February 5, 2020 at 1:55 am #1155050

I found an even better solution. The general problem is because of browser bugs. Just search the web for something like "css 100vw scrollbar". On my screen (1920px wide), the body is actually only 1903px wide, due to a 17px vertical scroll bar, but the CSS statement 100vw evaluates to 1920, thus the computation done in

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

are wrong.

To fix this, I made this "hack": I introduced a new CSS variable:

:root {
  --viewportwidth: 100vw;
}

I then added the following "hook"-type element to wp_footer with the following code:

<script>
function handleWindow() {
    var body = document.querySelector('body');
	if (window.innerWidth > body.clientWidth) {
		// there is a scrollbar, thus 100vw is wrong, so let's fix it
		let root = document.documentElement;
		root.style.setProperty('--viewportwidth', body.clientWidth + "px");
	}
}

handleWindow();

window.addEventListener('resize', handleWindow);
</script>

This simply updates the CSS variable.

Of course, I then also need to update the CSS as follows:

.no-sidebar .entry-content .alignfull {
	margin-left: calc(-1 * var(--viewportwidth)/2 + 100%/2);
	margin-right: calc(-1 * var(--viewportwidth)/2 + 100%/2);
}

Cheers!

This archived topic is closed to new replies.

Start building better websites today.