2

I am working on a Sitecore SXA website and i am adding default component of SXA but as per UI html we need to remove div row wrapper class which is coming after adding components on the page. I have to use default html. I am using bootstrap 5 in our project. For reference i am adding screenshot as well.

enter image description here

3 Answers 3

4

You can navigate to /sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 5/Bootstrap 5 Grid Definition

Lookout for settings that deal with <div class="row"> element. You can customize settings to tailor the HTML output

Please refer to the screenshot provided below:

enter image description here

1

If you want to remove this extra row that is wrapping your components, you need to patch a 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>

So in the above, we have added the placeholders @Html.Sitecore().Placeholder("utility-links") and @Html.Sitecore().Placeholder("login-link") and the div row will not be rendered.

Refer to this for more information

Sitecore SXA- Remove div row wrappers

Hope this helps.

0

I believe since you are using a container component, in that case extra div is generated through PlaceholderDatasourceContext inside the Container.cshtml file.

enter image description here

Above wrapper invokes the Grid responsible for generating the div, that can be found by navigating to Site Settings Item as shown below.

enter image description here

In above case Bootstrap 5 theme is used, therefore the wrapping tag can be removed from the following item (/sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 5/Bootstrap 5 Grid Definition) as below.

enter image description here

As a additional note pipeline responsible for generating the wrapper through above item, sits inside the mvc.renderPlaceholder pipeline processor as below.

<processor type="Sitecore.XA.Foundation.Grid.Pipelines.RenderPlaceholder.AddPlaceholderWrapper, Sitecore.XA.Foundation.Grid" resolve="true"></processor>

Attached below is the snippet of the PlaceholderWrapper marker extension, that generates row wrapper on the page.

enter image description here

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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