- This topic has 15 replies, 3 voices, and was last updated 4 years, 2 months ago by
.
-
Posts
-
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.
Customer Support
Hi there,
Try this CSS:
https://generatepress.com/forums/topic/uagb-block-width-issue-with-no-sidebar/#post-1122137Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps 🙂
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).
Can you try this?
body { overflow-x: hidden !important; }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.
Lead Developer
Can you try this, instead?:
html, body { overflow-x: hidden; }Hi, unfortunately, the problem still persists. Also when adding
!important. I’ve updated the site.I’m not seeing any horizontal scroll right now. Can you try clearing your browser cache?
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.
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.
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
divthat wraps the full-width block is too wide (wider thanhtml). I found that the weirdcalc()calls you inserted formargin-leftandmargin-rightin the GP theme for.no-sidebar .entry-content .alignfullare 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.
Does making that change still allow the block to be full width?
Yes, the block has no margins whatsoever, it seems to fully span the entire width of the page.
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 🙂
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
100vwevaluates 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_footerwith 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!
- You must be logged in to reply to this topic.