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:
<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.
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)
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.