DUPLICATE: Global Classes component property not reflecting on builder canvas (frontend works correctly)

Bugs
1

Browser: Chrome 110
OS: macOS
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

I have a component with a Global Classes property (“Spiegelen” / Mirror) connected to a Container element. The property has one option: “Ja” (Yes), which adds the class sg-hero-split__container-reverse. This class sets flex-direction: row-reverse and adjusts border-radius values.

Expected behavior: When selecting “Ja” on a component instance, the canvas should immediately reflect the reversed layout.

Actual behavior: The class is correctly applied on the frontend, but the builder canvas does not update when toggling the property. Even after saving and reloading the builder (Ctrl+Shift+R), the canvas does not reflect the change.

I also tried adding a second “reset” class (sg-hero-split__container-reset) with flex-direction: row !important for the default option, but this did not resolve the canvas rendering issue either.

I am using Bricks 2.3.2

2

Hey @barthusz,

can you share a component? You can just copy-paste it here, make sure to wrap the code inside ```.

Then I can try to replicate it locally with the exact same component as you.

Thanks,
Matej

3

Hi Matej,

Here is the component:

{“content”:\[{“id”:“bknvoh”,“name”:“section”,“parent”:0,“children”:[ ],“settings”:{},“cid”:“ypewsq”,“properties”:{“hynbcg”:{“id”:568,“filename”:“s-over-1.jpg”,“size”:“large”,“full”:“https://synergie-pm.local/wp-content/uploads/2026/01/s-over-1.jpg",“url”:“https://synergie-pm.local/wp-content/uploads/2026/01/s-over-1-1024x492.jpg”},“klkdst”:"Ondernemende professional”,“ylpnxy”:“zupzdl”,“tfrqlg”:“ydgyqe”,“mdptvs”:“enowgu”,“zseeau”:“teyvfq”}}\],“source”:“bricksCopiedElements”,“sourceUrl”:“https://synergie-pm.local”,“version”:“2.3.2”,“components”:\[{“id”:“ypewsq”,“category”:“Synergie”,“desc”:“”,“elements”:\[{“id”:“ypewsq”,“name”:“section”,“parent”:0,“children”:\[“luewkr”,“mlcagt”\],“settings”:{“\_cssGlobalClasses”:\[“rgprkp”\]},“label”:“Hero”},{“id”:“luewkr”,“name”:“container”,“parent”:“ypewsq”,“children”:\[“rmkfza”,“sgvtke”\],“settings”:{“\_cssGlobalClasses”:\[“oiezro”\]}},{“id”:“rmkfza”,“name”:“block”,“parent”:“luewkr”,“children”:\[“gkrzzs”\],“settings”:{“\_cssGlobalClasses”:\[“udcqgz”\]},“label”:“Left”},{“id”:“hqvyyl”,“name”:“heading”,“parent”:“gkrzzs”,“children”:[ ],“settings”:{“text”:“Oprechte aandacht”,“\_cssGlobalClasses”:\[“uxdppc”\],“\_interactions”:\[{“id”:“ilydwc”,“trigger”:“enterView”,“action”:“startAnimation”,“animationType”:“fadeInUp”,“runOnce”:true}\]},“label”:“Text”},{“id”:“gkrzzs”,“name”:“div”,“parent”:“rmkfza”,“children”:\[“hqvyyl”\],“settings”:{“\_cssGlobalClasses”:\[“hmcfka”\],“\_display”:“flex”,“\_alignItems”:“center”,“\_direction”:“column”,“\_justifyContent”:“center”,“\_cssCustom”:“.sg-hero-split__container-reverse .sg-hero-split__left .sg-hero-split__circle–left {\\n  border-top-left-radius: 450px;\\nborder-top-right-radius: 0 !important;\\nborder-bottom-right-radius: 0px;\\nborder-bottom-left-radius: 0;\\n}”},“label”:“Inner”},{“id”:“sgvtke”,“name”:“block”,“parent”:“luewkr”,“children”:\[“bcqpwa”\],“settings”:{“\_cssGlobalClasses”:\[“vofeyo”\]},“label”:“Right”},{“id”:“ogrnhn”,“name”:“heading”,“parent”:“bcqpwa”,“children”:[ ],“settings”:{“text”:“Voor gerichte actie”,“\_cssGlobalClasses”:\[“uxdppc”\],“\_interactions”:\[{“id”:“dylhgg”,“trigger”:“enterView”,“action”:“startAnimation”,“animationType”:“fadeInDown”,“runOnce”:true}\]},“label”:“Voor gerichte actie”},{“id”:“bcqpwa”,“name”:“div”,“parent”:“sgvtke”,“children”:\[“ogrnhn”,“ixmwlg”\],“settings”:{“\_cssGlobalClasses”:\[“ptvlxu”\],“\_display”:“flex”,“\_direction”:“column”,“\_justifyContent”:“center”,“\_alignItems”:“center”,“\_cssCustom”:“.sg-hero-split__container-reverse .sg-hero-split__right .sg-hero-split__circle–right {\\n  border-top-left-radius: 0px;\\nborder-top-right-radius: 0px !important;\\nborder-bottom-right-radius: 450px;\\nborder-bottom-left-radius: 0;\\n}\\n”},“label”:“Inner”},{“id”:“ixmwlg”,“name”:“image”,“parent”:“bcqpwa”,“children”:[ ],“settings”:{“\_cssGlobalClasses”:\[“gpdqsz”\]},“label”:“Circle Right Bg Image”},{“id”:“mlcagt”,“name”:“image”,“parent”:“ypewsq”,“children”:[ ],“settings”:{“\_cssGlobalClasses”:\[“irmwpr”\]},“label”:“Background”}\],“properties”:\[{“label”:“Tekst links”,“type”:“text”,“group”:“fqxwrh”,“id”:“klkdst”,“connections”:{“hqvyyl”:\[“text”\]}},{“label”:“Achtergrondkleur links”,“type”:“class”,“group”:“fqxwrh”,“options”:\[{“id”:“zupzdl”,“label”:“Geen”,“value”:“”},{“id”:“eszgob”,“label”:“Oranje”,“value”:\[“vqprku”\]},{“id”:“paayhe”,“label”:“Petrol”,“value”:\[“faxaei”\]},{“id”:“sbpcqe”,“label”:“Zandkleur”,“value”:\[“mafhey”\]},{“id”:“kljagk”,“label”:“Turquoise”,“value”:\[“sidsat”\]},{“id”:“gmikft”,“label”:“Bruin”,“value”:\[“ccmrnm”\]}\],“id”:“ylpnxy”,“connections”:{“gkrzzs”:\[“\_cssGlobalClasses”\]},“default”:\[“eszgob”\]},{“label”:“Tekst rechts”,“type”:“text”,“group”:“jrbcug”,“id”:“oosmjd”,“connections”:{“ogrnhn”:\[“text”\]}},{“label”:“Achtergrondkleur rechts”,“type”:“class”,“group”:“jrbcug”,“options”:\[{“id”:“ydgyqe”,“label”:“Geen”,“value”:“”},{“id”:“knpgvd”,“label”:“Oranje”,“value”:\[“vqprku”\]},{“id”:“ynseps”,“label”:“Petrol”,“value”:\[“faxaei”\]},{“id”:“anknfs”,“label”:“Zandkleur”,“value”:\[“mafhey”\]},{“id”:“stipzu”,“label”:“Turquoise”,“value”:\[“sidsat”\]},{“id”:“rgjpsr”,“label”:“Bruin”,“value”:\[“ccmrnm”\]}\],“id”:“tfrqlg”,“connections”:{“bcqpwa”:\[“\_cssGlobalClasses”\]},“default”:\[“stipzu”\]},{“label”:“Afbeelding rechts”,“type”:“image”,“group”:“jrbcug”,“id”:“hynbcg”,“connections”:{“ixmwlg”:\[“image”\]}},{“label”:“Afbeelding hele breedte”,“type”:“image”,“group”:“duivrz”,“id”:“rooykz”,“connections”:{“mlcagt”:\[“image”\]}},{“label”:“Achtergrondkleur”,“type”:“class”,“group”:“duivrz”,“id”:“mdptvs”,“connections”:{“ypewsq”:\[“\_cssGlobalClasses”\]},“options”:\[{“id”:“jqxrww”,“label”:“Geen”,“value”:“”},{“id”:“fqxcfy”,“label”:“Oranje”,“value”:\[“vqprku”\]},{“id”:“wsqqtc”,“label”:“Petrol”,“value”:\[“faxaei”\]},{“id”:“fnhpqs”,“label”:“Zandkleur”,“value”:\[“mafhey”\]},{“id”:“enowgu”,“label”:“Turquoise”,“value”:\[“sidsat”\]},{“id”:“lpecsl”,“label”:“Bruin”,“value”:\[“ccmrnm”\]}\]},{“label”:“Spiegelen”,“type”:“class”,“group”:“wuscod”,“options”:\[{“id”:“teyvfq”,“label”:“Ja”,“value”:\[“qxitxr”\]}\],“id”:“zseeau”,“connections”:{“luewkr”:\[“\_cssGlobalClasses”\]}}\],“\_created”:1765359509,“\_user_id”:1,“\_version”:“2.1.4”,“propertyGroups”:\[{“id”:“fqxwrh”,“name”:“Links”},{“id”:“jrbcug”,“name”:“Rechts”},{“id”:“duivrz”,“name”:“Hele breedte”},{“id”:“wuscod”,“name”:“Overig”}\]}\],“globalClasses”:\[{“id”:“rgprkp”,“name”:“sg-hero-split”,“settings”:{“\_height”:“450”,“\_padding”:{“bottom”:“0”,“top”:“0”,“right”:“0”,“left”:“0”},“\_display:mobile_landscape”:“flex”,“\_position”:“relative”,“\_height:mobile_landscape”:“auto”},“modified”:1764599204,“user_id”:1},{“id”:“oiezro”,“name”:“sg-hero-split__container”,“settings”:{“\_direction”:“row”,“\_alignItems”:“stretch”,“\_height”:“100%”,“\_width”:“100%”,“\_widthMax”:“100%”,“\_direction:mobile_landscape”:“row”,“\_flexWrap:mobile_landscape”:“nowrap”}},{“id”:“udcqgz”,“name”:“sg-hero-split__left”,“settings”:{“\_overflow”:“hidden”,“\_position”:“relative”,“\_height”:“100%”,“\_alignSelf”:“stretch”,“\_justifyContent”:“center”,“\_alignItems”:“flex-end”,“\_alignItems:mobile_landscape”:“flex-start”,“\_justifyContent:mobile_landscape”:“center”,“\_height:mobile_landscape”:“200”,“\_padding”:{“right”:“12%”},“\_padding:mobile_landscape”:{“right”:“0”,“left”:“var(–space-s)”},“\_height:mobile_portrait”:“150”},“modified”:1765375892,“user_id”:1},{“id”:“uxdppc”,“name”:“sg-hero-split__text”,“settings”:{“\_typography”:{“text-transform”:“lowercase”,“color”:{“raw”:“var(–senary)”,“id”:“01KBCZ0GAXE2TPSKRGASKMHE5N”,“name”:“senary”},“font-weight”:“500”,“font-size”:“var(–text-2xl)”,“text-align”:“center”},“\_position”:“relative”,“\_zIndex”:“20”,“\_typography:mobile_landscape”:{“font-size”:“var(–text-l)”},“\_typography:mobile_portrait”:{“font-size”:“var(–text-m)”},“\_widthMax:mobile_landscape”:“60%”},“modified”:1775827067,“user_id”:1},{“id”:“hmcfka”,“name”:“sg-hero-split__circle–left”,“settings”:{“\_position”:“absolute”,“\_bottom”:“0”,“\_left”:“0”,“\_right”:“0”,“\_top”:“70”,“\_zIndex”:“10”,“\_border”:{“radius”:{“right”:“450”}},“\_top:mobile_landscape”:“20”,“\_border:mobile_landscape”:{“radius”:{“right”:“150”}},“\_padding”:{“left”:“var(–space-4xl)”,“right”:“var(–space-4xl)”}},“modified”:1775834673,“user_id”:1},{“id”:“vofeyo”,“name”:“sg-hero-split__right”,“settings”:{“\_overflow”:“hidden”,“\_position”:“relative”,“\_height”:“100%”,“\_alignSelf”:“stretch”,“\_justifyContent”:“center”,“\_alignItems”:“flex-start”,“\_justifyContent:mobile_landscape”:“center”,“\_alignItems:mobile_landscape”:“flex-end”,“\_height:mobile_landscape”:“200”,“\_padding”:{“left”:“12%”},“\_padding:mobile_landscape”:{“left”:“0”,“right”:“var(–space-s)”},“\_height:mobile_portrait”:“150”},“modified”:1765375892,“user_id”:1},{“id”:“ptvlxu”,“name”:“sg-hero-split__circle–right”,“settings”:{“\_position”:“absolute”,“\_top”:“0”,“\_right”:“0”,“\_bottom”:“70”,“\_left”:“0”,“\_zIndex”:“10”,“\_border”:{“radius”:{“left”:“450”}},“\_bottom:mobile_landscape”:“20”,“\_overflow”:“hidden”,“\_border:mobile_landscape”:{“radius”:{“left”:“150”}}},“modified”:1764599204,“user_id”:1},{“id”:“gpdqsz”,“name”:“sg-hero-split__circle–right-bg-image”,“settings”:{“\_position”:“absolute”,“\_top”:“0”,“\_right”:“0”,“\_bottom”:“0”,“\_left”:“0”,“\_height”:“100%”,“\_objectFit”:“cover”,“\_width”:“100%”},“modified”:1765361309,“user_id”:1},{“id”:“irmwpr”,“name”:“sg-hero-split__bg”,“settings”:{“\_position”:“absolute”,“\_top”:“0”,“\_right”:“0”,“\_bottom”:“0”,“\_left”:“0”,“\_height”:“100%”,“\_width”:“100%”,“\_objectFit”:“cover”}},{“id”:“vqprku”,“name”:“sg-bg–orange”,“settings”:{“\_background”:{“color”:{“raw”:“var(–secondary)”,“id”:“01GXBWJMZX793Y156N940FCB3G”,“name”:“secondary”}}}},{“id”:“faxaei”,“name”:“sg-bg–petrol”,“settings”:{“\_background”:{“color”:{“raw”:“var(–quinary)”,“id”:“01KBCYWFF7XVJ8QSS4G1G14JMY”,“name”:“quinary”}}}},{“id”:“mafhey”,“name”:“sg-bg–sand”,“settings”:{“\_background”:{“color”:{“raw”:“var(–tertiary)”,“id”:“01H4DWRBRV1RDP8CF36THAMMGK”,“name”:“tertiary”}}}},{“id”:“sidsat”,“name”:“sg-bg–turquoise”,“settings”:{“\_background”:{“color”:{“raw”:“var(–quaternary)”,“id”:“01KBCYTM6P1D1NNZJS78860EYT”,“name”:“quaternary”}}}},{“id”:“ccmrnm”,“name”:“sg-bg–brown”,“settings”:{“\_background”:{“color”:{“raw”:“var(–primary)”,“id”:“01GXBWJFMN0FTV5W63KFVZYHHA”,“name”:“primary”}}},“modified”:1765364295,“user_id”:1},{“id”:“qxitxr”,“name”:“sg-hero-split__container-reverse”,“settings”:{“\_direction”:“row-reverse”},“modified”:1775834673,“user_id”:1}\]}

Its a very complicated component but the mirror option is in the last group, called ‘Spiegelen‘ and then choose ‘Ja‘.

You can create rounded sections with it like you can see here: CleanShot 2026-04-13 at 16.05.15 · CleanShot Cloud

4

And thanks in advance! :folded_hands:

5

Hi @barthusz,

the content you pasted is not pasted properly. I’ve tried to edit the message, but original data was already changed.
Can you copy-paste it again and make sure that it’s inside code block?

Alternatively, which might be even better, can you send temporary login credentials to your website and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase, so I can take a look there?

Thank you,
Matej

6

Hi @Matej , I just emailed you all the information, including an explanation video :blush: If you have any more questions, please let me know. I am curious if I am doing something wrong or that I really found a bug. But since it works on the frontend but not in the backend I think it’s the latter.

Looking forward to your reply!

7

Hey @barthusz,

Like mentioned over email, the issue seems to be the same as here:

Once we release a fix, we will update the topic mentioned above.

Thank you,
Matej