2

When using Sitecore's placeholder in combination with the SXA Column-splitter, multiple <div class="row"> are then added/rendered. This causes unintended margins and paddings in our layout.

Questions:

  • Is there a way to avoid this?
  • Is it not the intend to use Sitecore's Column-splitter component inside of a placeholder?
  • Is there some attributes I can set on the Placeholder that will allow me to not render the <div class="row"> it itself generates?

In addition, I tried changing the Grid Setup Settings in Sitecore but only option I found was to remove the generation of <div class="row" globally for the whole grid and all of the Placeholders and SXA components. This is not what I want.

Here is the code I use to make the placeholder:

@Html.Sitecore().Placeholder("SomePlaceholder")

When I add Sitecore's SXA Column-splitter inside of it, I get an additional <div class="row"> (as seen in screenshot of browser console below) which causes the problem.

Screenshot from browser console, showing duplicate divs with class row

I would expect that there would be only one <div class="row"> with the inherited margin and padding set by the grid. (In my case the Bootstrap 4 Grid, assigned in Sitecore's Grid Setup for our SXA Theme)

  • 2
    Good answer from @Jen below but can I suggest using sitecore.stackexchange.com in future ? You will get more responses. – epik phail Jun 13 at 10:25
  • If you found my answer useful please remember to mark it as an accepted answer. Thanks! – Jen 14 hours ago
2

You can patch the config by specifying certain placeholders that you want to exclude from generating the row.

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <experienceAccelerator>
      <grid>
        <placeholderWrapper>
            <excludedPlaceholders>
                <placeholder patch:after="body-bottom">utility-links</placeholder>
                <placeholder patch:after="utility-links">login-link</placeholder>
            </excludedPlaceholders>
        </placeholderWrapper>
      </grid>
    </experienceAccelerator>
  </sitecore>
</configuration>

For example in a view we use:

@Html.Sitecore().Placeholder("utility-links")

and

@Html.Sitecore().Placeholder("login-link")

Which we did not want in a new row.

0

There are a few approaches to eliminate the superficial row.

  1. As Jen suggested to add an ignored placeholder to skip adding this wrapper on Row Splitter placeholders.
  2. Customize the Row Splitter cshtml view for your site to avoid having the additional wrapper rendered in the view as documented here.

But the first thing to check is your SXA version. I believe this problem was only present in SXA 1.8 (at which point we have introduced Bootstrap 4) and subsequently fixed in SXA 1.8.1. If upgrading to 1.8.1 is an option, I would most definitely suggest that.

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.