sitecoresitecore-sxa

How to avoid duplicate divs.row when using Sitecore placeholders and the SXA Column splitter component?


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:

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)


Solution

  • 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.