[Resolved] Unwanted horizontal scrolling when inserting Gutenberg full-width block

Home Forums Support Unwanted horizontal scrolling when inserting Gutenberg full-width block

This topic contains 15 replies, has 3 voices, and was last updated by  Tom 1 week, 5 days ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1141866

    Marius

    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.

    #1141904

    Leo Customer Support
    #1141916

    Marius

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

    #1141934

    Leo Customer Support

    Can you try this?

    body {
        overflow-x: hidden !important;
    }
    #1142221

    Marius

    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.

    #1142805

    Tom Lead Developer

    Can you try this, instead?:

    html,
    body {
        overflow-x: hidden;
    }
    #1142927

    Marius

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

    #1142975

    Tom Lead Developer

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

    #1143014

    Marius

    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.

    #1143141

    Tom Lead Developer

    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.

    #1143470

    Marius

    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.

    #1143868

    Tom Lead Developer

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

    #1144063

    Marius

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

    #1144149

    Tom Lead Developer

    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 🙂

    #1155050

    Marius

    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!

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.