[Resolved] Horizontal Scrollbar on align full items

Home Forums Support [Resolved] Horizontal Scrollbar on align full items

Home Forums Support Horizontal Scrollbar on align full items

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1198117
    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

    #1198571
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    body {
        overflow-x: hidden;
    }

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

    Let me know if this helps 🙂

    #1198576
    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.

    #1198583
    Leo
    Staff
    Customer Support

    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?

    #1198597
    Phuc

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

    #1198648
    Leo
    Staff
    Customer Support
    #1625725
    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.

    #1625945
    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.

    #1770784
    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.

    #1771522
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.