0

Why does my overlay open with a horizontal scrollbar?
overlay

The only content in the "overlay" placeholder is an empty "Container". If I have no content whatsoever, then there is not scrollbar - but as soon as I add any content then I get the scrollbar.

EDIT: this seems to have something to do with the definition of the "row" css-class (which I think comes from "bootstrap"). This has "margin-left: -15px" for example. Any way to override this when defining the overlay?

EDIT: this is for Sitecore 10.1; SXA version 11200 (from "/sitecore/system/Settings/Foundation/Experience Accelerator/Upgrade/Current")

2

I have something that seems to solve this issue for me. Please comment if you have more info or insight about this.

It appears that Sitecore placeholders when generated are wrapped in a "div" with class "row".

For my installation using "bootstrap 4", this behaviour is defined in Sitecore at "/sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 4/Bootstrap 4 Grid Definition". See the "Placeholder Wrapper" section.

Part of the HTML generated by Sitecore for an overlay looks like this:

<span class="overlay-data" data-width="400" data-height="400" data-percent="">
    <div class="row">
        <div class="component container col-12"> <!-- component I added -->

Somehow the "row" here has margin-left and margin-right set to -15px.

The way I got around my issue was to upload an "extension" css file to "/sitecore/media library/Extension Themes/mysite/styles". In this css I redefined the margins for the row class used under the overlay placeholder:

span.overlay-data>.row {
    margin-left: 0px;
    margin-right: 0px;
}
1
  • Looks like a valid fix. Please specify Sitecore and SXA versions in your question as this might me issue of particular version... Apr 22 at 11:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.