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

yankiara · July 3, 2022, 3:17pm

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.

timmse · July 4, 2022, 4:01pm

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

yankiara · July 5, 2022, 1:18pm

Hey,
Sorry, same with 1.5b.

timmse · July 5, 2022, 3:35pm

Hey Yan, I know what it is

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

yankiara · July 5, 2022, 4:25pm

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

timmse · July 6, 2022, 10:05am

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?

timmse · July 8, 2022, 10:48am

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

luistinygod · August 5, 2022, 12:37pm

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

yankiara · August 7, 2022, 3:54pm

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

yankiara · August 12, 2022, 5:49pm

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)

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)

yankiara · August 14, 2022, 10:13am

@timmse, @luistinygod,

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

omega · August 14, 2022, 10:19am

@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.

timmse · August 15, 2022, 6:49pm

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

luistinygod · August 16, 2022, 12:15pm

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?

yankiara · August 16, 2022, 6:36pm

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.

yankiara · August 17, 2022, 8:09am

I was not talking about TEMPORARY fix

yankiara · August 17, 2022, 8:11am

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

yankiara · September 20, 2022, 8:49pm

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

timmse · September 21, 2022, 4:54pm

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

Best regards,
timmse

yankiara · September 21, 2022, 8:26pm

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