WAIT: Template elements cause structure to misbehave & unwanted style injection

[johnnyhatz]

Summary:
Bricks Builder intermittently fails to maintain the intended DOM structure when template elements are part of the structure which causes positioning issues. Bricks is also injecting unnecessary wrappers and style tags in the front-end output even when ‘render without wrapper’ is checked.

Details:

• Structure Issues:

  • Template Nesting Error:
    • Timestamp 0:00-1:07: I have templates (i.e. the SVG-based flower elements) set up within a structured container (hero section > inner content wrapper with relative positioning > h1 + div + 3 x templates (position absolute). But, on the front end, some templates appear outside the intended container, breaking the layout.
    • Timestamp 1:07-1:59: Absolute positioned elements are rendered inconsistently; while some templates remain inside the inner container, others are moved outside, affecting proper positioning.

• brxe-template 100% width style overrides:

  • Timestamp 2:17-2:41: brxe-templates are assigned default 100% width for some reason which causes issues. I can override this easily of course but why is it there in the first place? It means developers need to manually override these defaults when rendering with the template wrapper.

• Extra Wrapper and Style Injection:

  • Timestamp 3:13-4:11: When rendering a logo template within the header template, Bricks is adding this extra template wrapper and unwanted style tags. This extra markup is unnecessary and contradicts my selection to ‘render without wrapper’. I can see similar looking markup injected inside the builder when template elements are added but it seems to carry forward to the DOM rendering when it is not needed.
  • Timestamp 4:28-4:48: Random style tags with the template styles are generated and injected in the front-end output despite not being needed nor asked for.

Reproduction:

1. Create a page with a structured layout (e.g., hero section with nested content wrapper, relative positioned container).
2. Insert multiple templates (e.g. SVG elements in a template) that rely on absolute positioning.
3. Observe on the front end if templates are rendered in their intended container and any extra wrappers or style tags that are unwanted.
4. Render a header template that contains a logo template (without the template wrapper) and verify if the additional unnecessary markup is injected.

Expected Behavior:

• The front-end output should exactly mirror the structure set up in the builder.
• Templates should render without any default styles unless explicitly defined.
• No extra wrappers or unwanted style tags should be added when a template is rendered without a wrapper.

Environment:

• Bricks Builder (no experimental features, components, or layer default styles enabled)

Additional Notes:

• This issue is intermittent; sometimes the structure renders correctly, while other times it does not.
• The problem affects both inline and non-inline styling scenarios.
• No caching involved. Cloudflare set to dev mode.

Please investigate the DOM rendering process to ensure that the builder’s structure and styling configurations are respected in the front-end output. Able to provide login credentials if required.

Bricks Version: 1.12.1
Browser: Brave Latest
OS: Windows 10
Video: Bricks template elements cause structure to misbehave - Brave - 17 February 2025 | Loom
Link: https://nbt.overwrite.dev/

[johnnyhatz]

UPDATE. The issue seems to have fixed itself. I have seen a similar issue before regarding templates and in that instance it fixed itself too:

NO BUG: Template Element - Always renders root wrapper even when 'Render without wrapper' is True

Browser: Brave latest OS: Windows 10. Video: Template Element Issue in Bricks | Loom Please watch video above. I demo the issue and the fix. I demo that the ‘Render without wrapper’ checkbox behaviour is incorrect. To replicate: Create a new section template. Add template element to a page. Toggle off the ‘Render without wrapper’ checkbox. View on frontend and inspect; outer wrapper with brxe-template class should be applied. Back to builder. Toggle on the ‘Render without wrapper’ checkbo…

Nonetheless, this is a very intermittent bug and has been ongoing on this site for a week or so. After some work and re-saves on the home page, the issue returns - builder structure and rendered DOM structure are different - and then for some unknown reason the issue goes away. When template elements aren’t used, there are no such issues.

For what it’s worth, I feel like these issues intermittent template issues have only started since Bricks’ crusade against the builder lag.

[johnnyhatz]

UPDATE. As soon as I activate the @layer experiment, make an edit in the builder and save, the issue immediately returns.

Doing the reverse, deactivating @layer, re-saving the builder corrects the issue immediately.

[Matej]

Hello @johnnyhatz,

I was not able to replicate those issues locally. Any chance that you:

• Export the template with SVG and share it.
• Copy-paste the structure of your page, where you are testing it, so I can have the same settings.

Or, if you want and to make it easier, you can send temporary login credentials to your website and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase. Then, I can check on your website and try to reproduce it locally more easy.

Thank you.
Matej

[johnnyhatz]

I have emailed you access