WIP: Accordion styling issue in a section template with external CSS

Bricks Version: 1.4.0.2
Browser: Chrome
OS: Windows

Hi,

When using accordion element in a section template, toggles are not correctly rendered on frontend with external CSS activated:

  • a bullet appears before title
  • both “expand” icons are displayed and at the wrong place (below the title)
  • all items are expanded at page load
  • there is no spacing between items

NOTE: When I add another accordion somewhere on the page but NOT in a template, all accordions are correctly rendered, including the one in the template.

Hi Yan,
Thanks so much for your report!

Yep, we encountered the bug a few days ago and it should be fixed in 1.5beta. Can you please test it again and let us know?

Best regards,
timmse

Hey,
Sorry, same with 1.5b.

Hey Yan, I know what it is :slight_smile:

Can you please try to disable WP REST API Render in Bricks » Settings » Builder and see if the template renders correctly on the canvas?

YES :slight_smile:
It’s OK in the canvas, but still no style on frontend.

Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase?

Hey Yan,
Thanks for the access data!

Problem detected and confirmed! I changed your styles to inline styles which solve the problem temporarily.

In my dev version everything already works without problems (see screenshot).

Best regards,
timmse

1 Like

Hey @yankiara,

Just checking if you had the chance to test this with Bricks 1.5RC?

In the meantime, we released 1.5RC2 which is now available for manual download from your account page.

If the fix isn’t working as expected, please let me know here.

Thank you!
Luis

1 Like

Hi,
Couldn’t test with RC but I can confirm it is fixed in RC2 :slight_smile:
Thanks a lot!

1 Like

Oops sorry but no, still broken, at least in 1.5 final.

It is OK on homepage, but not on other pages (same template is used) :frowning:

Maybe because my homepage doesn’t use the page template like others?
It would mean it is broken if template is nested inside other template.

EDIT: Confirmed, if my section template is nested inside a page template, accordion style is still broken.
(and it is OK with inline CSS)

@timmse, @luistinygod,

A quick fix would be welcome, since site is in production now :wink:

@yankiara While they provide you with a fix, why not copy the styles for accordion from inline css and then set to external css and overwrite external css with !important with the correct css from the inline.

Is using inline styles not a temporary fix? :thinking:
Omega’s suggestion works too if you want to stay with external files.

Hello @yankiara

I’m not able to reproduce this.

I created a section template, inserted an accordion element (the regular accordion element), changed the accordion title typography. On a page template, I added this section using a Template element. I was able to preview it correctly (canvas and template preview in the frontend). Then I visited a page that uses this page template, and I see the accordion correctly styled. This is working with the CSS loading method set to External Files.

Am I missing any step?

Hi,

It is the base accordion element CSS which seems to be NOT included, not the style edited in UI by user.

Here is the accordion in a section template (called via template element) on my homepage (no page template):

Here is the same section (same call) on other pages (WITH page template):

So it looks like accordion CSS is missing when inside a section template inside a page template.
Maybe some template nesting issue?

(JS is OK though, expand/collapse work, but as CSS is missing, expand doesn’t collapse other tabs.)

You have credentials for the site, but I can send them again if needed.

I was not talking about TEMPORARY fix :rofl:

Thank you but too lazy to do that.
I’ll stick to one click inline CSS solution :wink:

BUMP, this issue is NOT SOLVED, please have a look at my last explanations.

Hi Yan,
Thank you for pointing it out. I’ve added the issue to the bug tracker again. No need to get LOUD :smiley:

Best regards,
timmse

Sorry didn’t mean to shout out, just to emphasize a bit…