Horizontal Overflow On SP Page Builder Pages Caused By Helix Component Row Gutter - Question | JoomShaper

is live, now with multi-currency selling.

Learn More
Back to the questions

Horizontal Overflow On SP Page Builder Pages Caused By Helix Component Row Gutter

SO

Sabrina Ostfalk

SP Page Builder 6 days ago

Hello, I found a reproducible horizontal overflow issue on mobile when using SP Page Builder pages together with Helix Ultimate. Environment:

  • Joomla 6
  • Helix Ultimate
  • SP Page Builder Pro
  • Direct SP Page Builder page (com_sppagebuilder)
  • Tested on Android with Chrome and Firefox
  • Viewport width in the test: 320 px

On an SP Page Builder page, the generated outer structure around the component is:

<section id="sp-main-body">
  <div class="row">
    <div id="sp-component" class="col-lg-12">
      ...
    </div>
  </div>
</section>

The .row gets the normal Bootstrap gutter: --bs-gutter-x: 1.875rem;

which results in:

margin-left: -15px;
margin-right: -15px;

However, #sp-main-body has no corresponding horizontal container padding. On a 320 px viewport I therefore get:

#sp-main-body:
left: 0
right: 320
width: 320

#sp-main-body > .row:
left: -15
right: 335
width: 350

This causes:

document.documentElement.clientWidth = 320
document.documentElement.scrollWidth = 335

and produces a visible white strip on the right side of the page. It also affects the positioning of the Helix off-canvas menu. I tested the same Helix template with a normal Joomla content page. There the issue does not occur:

clientWidth: 320
scrollWidth: 320

and there is no corresponding direct .row under #sp-main-body.

I also tested the Helix Fluid Width settings. Enabling or disabling Fluid Width does not remove the problem.

The following CSS workaround fixes the issue:

body.com_sppagebuilder #sp-main-body > .row {
  --bs-gutter-x: 0;
}

After applying this, the SP Page Builder page no longer causes horizontal overflow.

Could you please check whether the component row for direct SP Page Builder pages should have its Bootstrap gutter disabled, or whether a corresponding container is missing in the generated Helix/SP Page Builder layout?

The problem appears to be specific to the integration of direct com_sppagebuilder pages with the Helix component layout rather than to an individual SP Page Builder section.

0
2 Answers
Order by
Oldest Newest Votes
Toufiq
Toufiq
Accepted Answer
Senior Staff 6 days ago #234557

Hi there,

Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. You have added this css code inside the custom.css file. That's why occurred the problem. 

.body-innerwrapper {
  overflow: visible !important;
}

Remove both css code and check again. 

.body-innerwrapper {
  overflow: visible !important;
}
body.com_sppagebuilder #sp-main-body > .row {
  --bs-gutter-x: 0;
}

Best regards,

Toufiqur Rahman (Team Lead, Support)

0
SO
Sabrina Ostfalk
Accepted Answer
5 days ago #234570

Thank you for your quick reply.

So, if I understand the situation correctly:

  • There is a mismatch between helix ultimate and page builder which creates an empty border
  • -> helix requires a container wrapper around row for the margins to align
  • -> page builder does not create this container so there is a border
  • but jspb covers up the problem of the mismatched border by clipping it with overflow: hidden

Unfortunately your advice will not work on my Joomla. I created my own stable, permanent sticky header (the default helix header does move and flicker when you start scrolling) and I need the overflow: visible for the sticky to work. So I will stick with the workaround I have.

Still I would strongly suggest to fix the missing container in the page builder code to make the outlines align, the unaligned structure might cause more/other problems.

0