SOLVED: Missing styles for nested component elements

Bugs
1

Browser: Chrome 137 / Firefox 141
OS: Windows
URLs:

After updating to v2.0-rc2, some styles for elements in components such as SVGs/icons and text are missing. When I inspect the page, I see that these styles have been added inline on Production but are missing on Staging.

Switching the CSS loading method between ‘External files’ and ‘Inline styles’ and clearing the cache several times does not seem to have any effect. Strangely, only the components seem to be affected.

Furthermore, I would actually expect these styles to be included in a stylesheet when ‘External files’ is selected, but that’s perhaps a topic for another day.

2

Hi @rikhen ,

Can you please send staging site admin credentials to help@bricksbuilder.io so I can follow your component setup and replicate the issue? (Please include this thread URL as a reference)

Regards,
Jenn

1 Like
3

Done! Thanks for the quick reply @itchycode

4

Just for clarification: what is the expected place to define styles for components?

I just did a fresh install with only Bricks v2.0-RC2 and created a simple card component. All styles added to this card are being rendered as inline styles inside bricks-frontend-inline-inline-css inside the <head>, unless I style them at the ID level!

Is this intentional?

5

Hi @rikhen ,

Thank you so much for the login details.

I can replicate the issue. (Nested component classes styles not generated in 2.0-rc2)

I have installed a temp fix on your staging site. Can you help check if it’s working correctly?

Regarding the global classes style rendered as inline, it’s the expected behaviour in the current Bricks code base. We had a plan to improve this but we have higher priority tasks to be completed currently. Please follow the thread here WIP: How to transfer bricks-frontend-inline-inline-css styles to a file? - #29 by pmjcreations

Regards,
Jenn

1 Like
6

Hey @itchycode,

Yes, thank you very much! Your temporary fix does seem to be working. Could you please provide some more information about what you’ve added? Nevertheless, I’ll wait for the update in the next release. I’m sure it will include other minor bug fixes.

Also, thanks for confirming that. I found that thread earlier and was surprised by its creation date.

DUPLICATE: Nested components lose stylying
7

Hi @rikhen ,

You can check in your staging site. These 2 lines changed.

/includes/assets.php

image
image1302×701 51.6 KB

1 Like
8

For future reference, they mean to change it in the theme/child theme file

    $unique_id = $element['id'] . '-' . $nested_component_element['id'];
    self::$elements[$unique_id] = $nested_component_element;
9

We’ve fixed this issue in Bricks 2.0, now available as a one-click update in your WordPress Dashboard.

Please take your time to read the changelog entry before updating: Bricks 2.0 Changelog – Bricks, and let us know if you continue to experience issues.

2 Likes
10

Great work, @timmse ! Everything has been fixed in version 2.0. Many thanks also to @itchycode for the temporary solution. It was very helpful.

2 Likes
11

i am on 2.0 and i am still having this issue

1 Like
12

I have this same issue, happens only on components when set to external files and having conditions are missing styles. Bricks 2.3.2

13

Please provide us with the components, or send us the details, login credentials, and a link to this thread at help@bricksbuilder.io if the issues do not occur within component slots - if slots are involved, it’s a known issue.

14

This is happening in version 2.3.8, I created an icon component which is nested in a card component. The CSS inline sets class chaining via ID instance and a general class, if I move it outside it works just fine but once it’s nested it loses the CSS styling.

But in the builder preview it does render correctly.

16

Hi @cdeweerdt ,
Yep, we’ve already received a report about this via email and are working on a fix.
We’ll update this thread as soon as there’s any news :v:

17

We’ve addressed this in Bricks 2.3.9, now available as a one-click update in your WordPress Dashboard.

Please read the changelog entry before updating, and let us know if you experience any issues.