NO BUG: Template Element Display Errors on Front End

Browser: Chrome Version 120.0.6099.225 (Official Build) (64-bit)
OS: Windows

I was working on a site https://hugheselitebuilders.com/new-homes/ and had created a new template via the templating system. The template itself was a section via importing a ‘Frames’ process card. I proceeded to the editor, added a new template element in the structure panel and selected my new template.

After doing so, existing templates on the page failed to render properly on the front end:

  • containers with display grid, were displaying flex
  • acss variable colour werent being picked up on heading elements
  • typography sizes via css variables werent being picked up
  • absolute images inside relative parent containers were breaking free from their containers

The templates that broke were created in June - Oct 2022 and werent affected on other pages of the site where used.

The only way I was able to fix the display issue was to open the template editor, copy the elements in the structure panel via right click + copy, and paste into the structure panel of the affected page. After doing this, i exited from the template without clicking save, and deleted the template element from the affected page.

After saving the page, the front end was fixed and display issues were no more.

It seems there may be something going on with CSS style sheets related to templates that may need to be looked into.

I’ve attached a screenshot example of what happened.

Has anyone else had this happen before?

Hi @KnightonDigital,

Does deleting the section template from the page resolve the issue? Most likely some CSS from the new template is overriding the CSS on your existing page.

Hi @charaf I actually tried deleting the section template, adding a new section and then re-adding a template element before selecting any of the templates I had created last year on the site again. Unfortunately the same error occurred.

The only way I was able to bypass this was by copying the contents of the original template via the builder view and pasting it into a new section element on the affected page (no longer a linked template). There was approximately 4 individual templates that were breaking on the same page, a few of the templates were placed on other pages on the site (where no updates have been made) and they were working as expected.

I can clone the site to a ‘test site’ and recreate the error with a front end link if it’s helpful to the team. I only resolved my error after talking to another user who had a similar experience and assumed the templating system was buggy. I think it’s definitely related to CSS specificity and loading order or something like that.

If adding any template element to a page causes issues then yes please share temporary admin access to help@bricksbuilder.io with a link to this forum thread.

It’s best if you could create a section template for this purpose (rather than using ‘Frames’).

Another debugging step would be to disable all plugins and see if the error persists.