[Support request] Horizontal Scrollbar with Gutenberg Cover Block

Home Forums Support [Support request] Horizontal Scrollbar with Gutenberg Cover Block

Home Forums Support Horizontal Scrollbar with Gutenberg Cover Block

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2230562
    Andreas

    Hi,

    due to the topic on
    https://generatepress.com/forums/topic/horizontal-scrollbar-on-pages-that-use-standard-wordpress-gutenberg-cover-block/

    Here again the problem:
    There’s a horizontal scrollbar, when you set a cover block on “full width” and off-canvas-panel (Customizer -> Layout -> Off Canvas Panel) is set to “off”.

    Setting off-canvas-panel to “on”, “only desktop” or “only mobile”, all is fine, there’s no scrollbar.

    Please, can you check this?

    Thanks
    Andy

    #2230857
    David
    Staff
    Customer Support

    Hi there,

    there isn’t much that can done when using the Full Width block option.
    It uses CSS to hack the sites padding, and stretch the block across the viewport.
    The problem is that some browsers on windows adds the vertical scrollbar inside the viewport which cannot be accounted for with CSS and this leads to horizontal overflow.

    If you want full width content then we recommend you:

    1. set the Content container to Full Width:

    https://docs.generatepress.com/article/content-container/

    2. Build the page out using the GenerateBlocks Container Block, to create sections that can be either Full Width or contained.

    This method means no overflow as you won’t need the Blocks Full Width option and you get to control the widths and padding as you need for your design.

    #2231159
    Andreas

    Hi David,

    thanks for the quick answer, but this seems to be an issue of generatepress.
    It works perfect with standard themes.

    I tried also with generateblocks (without Content container set to Full Width).
    With Full Width container, you get the same results (see my private note).

    Setting the Content container to Full Width and working with containers for each section would only be workaround. That means much work, if you have many pages and much content…

    Finally: The problem shows up on Mac and Win: FF, Chrome, Safari, Edge …

    #2231321
    Ying
    Staff
    Customer Support

    I tried also with generateblocks (without Content container set to Full Width).
    With Full Width container, you get the same results (see my private note).

    With GB, you don’t need to use the align full option, so make sure that option is disabled.
    The outer container of GB is full width by default, while you can choose full width or contained width for the inner container.

    That means much work, if you have many pages and much content…

    Not really. You can use a layout element to set all pages (or some pages) content container to full width.
    https://docs.generatepress.com/article/layout-element-overview/

    #2231397
    Andreas

    Perhaps, I’ve to make it more clear…

    I don’t want to set the page content container to full width, cause most content has contained width. So, I put the setting here to default.

    Now, to get some content to full width, I have to set the element I use (GB container or cover block) to full width. Right?

    Doing this in combination with off-canvas-panel to “off” brings up a scrollbar.

    Why is this working with off-canvas-panel “on”?

    #2231410
    Ying
    Staff
    Customer Support

    Because when activate off canvas menu, this CSS will be added to your site which hides (not fixes) the horizontal scroll on front end.

    .offside-js--init {
        overflow-x: hidden;
    }

    The correct and best way to do this in GP is what David suggested.

    The full width option works in WP theme but not GP is because GP’s template structure is different from WP’s template structure. For example, in WP twenty twenty one theme, you can’t change the content container width unless you use a plugin.

    #2231507
    Andreas

    Why not adding this style to non off-canvas-menu pages?
    Any impacts?

    #2231538
    Ying
    Staff
    Customer Support

    For example, some users want to use CSS to make the site header sticky, if theoverflow:hidden; is added to ancestor elements of the header, it will stop the sticky from working.

    There’re other scenarios too. We try to keep the theme light, so we don’t add unnecessary code to the theme unless we have to.

    #2232135
    Andreas

    For example, some users want to use CSS to make the site header sticky, if theoverflow:hidden; is added to a parent element of the header, it will stop the sticky from working.

    So these scenarios won’t work with off-canvas-menu pages?

    #2232588
    Ying
    Staff
    Customer Support

    It will if not both htmland bodyhave the overflowproperty.

    We are here to provide the solution that we think it’s the best, but after all it’s your choice.

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