SOLVED: Problem in multilingual WPML website with styling of inner elements in templates

[konlal]

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: https://jam.dev/c/6c7adf3d-0035-45eb-8bcf-421a2a63671e

Hello, the translations are missing styles into inner widgets.

I attach a sample, but it follows the whole website in almost all widgets in random elements that are styled directly from their element settings(color,paddings,borders etc), for now i will use css to deal with it i cant find other way. I tried disable wp rocket, clear server cache, change environment, regenerate css, re-translate single page template, login with incognito.

Issue is happening in both native Bricks Builder elements and Crocoblock elements. Something is going on with the element styling i think because i could replicate it into containers directly too on multilingual websites..

Also i noticed this is happening in everything that is a template no matter if it is bricks template / jet engine listing item template. I noticed that because i have a template for the my account page where i have a login form, it shows without styles and when i paste the same element into simple page, styles are working. Same is happening with those attached too i copied them into simple pages and they have no problem in both langs.

Also sometimes it is correct in the en language and wrong on el as you can see in the video.

I tried recreating also the templates.

Excuse me for the slowness of the server it is a staging website to not mess with the production because it is Auctions platform website custom build with bricks.

I attach both pictures and video and element copy.

Heading bricks builder(green “ΜΕ ΝΙΚΗΤΗ”) in single page:

{“content”:[{“id”:“flzrqv”,“name”:“heading”,“parent”:“pkgqqs”,“children”:,“settings”:{“text”:“ΜΕ ΝΙΚΗΤΗ”,“_conditions”:[[{“id”:“rmkhmo”,“key”:“dynamic_data”,“dynamic_data”:“{je_online-auctions_item_status}”,“compare”:“==”,“value”:“completed”}]],“_alignSelf”:“center”,“tag”:“custom”,“customTag”:“p”,“_typography”:{“color”:{“hex”:“#88c200”,“id”:“duskyf”,“name”:“Color #8”},“font-size”:“15”,“font-weight”:“600”,“text-align”:“center”},“_padding”:{“top”:“8”,“left”:“15”,“right”:“15”,“bottom”:“8”},“_border”:{“color”:{“hex”:“#88c200”,“id”:“duskyf”,“name”:“Color #8”},“width”:{“top”:“1”,“left”:“1”,“right”:“1”,“bottom”:“1”},“style”:“solid”,“radius”:{“top”:“8”,“right”:“8”,“bottom”:“8”,“left”:“8”}},“_width”:“100%”}}],“source”:“bricksCopiedElements”,“sourceUrl”:“``https://frattis.web-forge.io``”,“version”:“2.2-rc”}

Container in single page alongiside with the form :

{“content”:[{“id”:“lwgvqx”,“name”:“container”,“parent”:“mztjls”,“children”:[“yimwuz”,“xrwvqi”],“settings”:{“_conditions”:[[{“id”:“qylpaw”,“key”:“user_logged_in”,“compare”:“==”,“value”:“1”},{“id”:“hoytav”,“key”:“jedv_condition”,“compare”:“==”,“value”:“[jet_engine_condition jedv_condition="equal" jedv_field="item_status" jedv_value="active"]”}]],“_padding”:{“top”:“12”,“left”:“12”,“right”:“12”,“bottom”:“12”},“_border”:{“radius”:{“top”:“12”,“right”:“12”,“left”:“12”,“bottom”:“12”}},“_background”:{“color”:{“hex”:“#a98269”,“rgb”:“rgba(169, 130, 105, 0.13)”,“hsl”:“hsla(23, 27%, 54%, 0.13)”,“id”:“zkcani”,“name”:“Color #6”}}}},{“id”:“yimwuz”,“name”:“heading”,“parent”:“lwgvqx”,“children”:,“settings”:{“text”:“Τοποθέτηση προσφοράς”,“tag”:“h6”}},{“id”:“xrwvqi”,“name”:“jet-form-builder-form”,“parent”:“lwgvqx”,“children”:,“settings”:{“required_mark”:“*”,“input_color_scheme”:“normal”,“checkradio_fields_layout”:“column”,“form_id”:“25763”,“submit_type”:“ajax”,“form_row_gap_before”:“0”,“form_row_gap_after”:“0”,“label_typography”:{“color”:{“hex”:“#35433b”,“id”:“whnfdx”,“name”:“Color #1”}},“input_border”:{“radius”:{“top”:“12”,“right”:“12”,“left”:“12”,“bottom”:“12”},“width”:{“top”:“1”,“left”:“1”,“right”:“1”,“bottom”:“1”},“style”:“solid”,“color”:{“hex”:“#637e6e”,“rgb”:“rgba(99, 126, 110, 0.4)”,“hsl”:“hsla(144, 12%, 44%, 0.4)”,“id”:“krfpak”,“name”:“Color #11”}},“checkradio_fields_box_checked_bg”:{“hex”:“#35433b”,“id”:“whnfdx”,“name”:“Color #1”},“checkradio_fields_typography”:{“color”:{“hex”:“#0a100c”,“id”:“czpvol”,“name”:“Color #3”},“font-size”:“14px”,“line-height”:“18px”},“checkradio_fields_control_size”:“20px”,“checkradio_fields_gaps”:{“row”:“0”,“column”:“0”},“checkradio_fields_box_border”:{“color”:{“hex”:“#35433b”,“id”:“whnfdx”,“name”:“Color #1”},“width”:{“top”:“1”,“left”:“1”,“right”:“1”,“bottom”:“1”}},“calc_fields_align_main_axis”:“center”,“calc_fields_typography”:{“font-size”:“16px”,“color”:{“hex”:“#35433b”,“id”:“whnfdx”,“name”:“Color #1”}},“booking_form_repeater_bg_color”:{“hex”:“#a98269”,“id”:“edxybs”,“name”:“Color #2”},“booking_form_repeater_padding”:{“top”:“8”,“right”:“8”,“bottom”:“8”,“left”:“8”},“booking_form_repeater_border”:{“radius”:{“top”:“12”,“left”:“12”,“right”:“12”,“bottom”:“12”}},“booking_form_submit_bg_color”:{“hex”:“#35433b”,“id”:“whnfdx”,“name”:“Color #1”},“booking_form_submit_typography”:{“color”:{“hex”:“#ffffff”},“text-align”:“center”,“font-size”:“16px”},“booking_form_submit_align_main_axis”:“center”,“booking_form_submit_padding”:{“top”:“8”,“bottom”:“8”,“right”:“15”,“left”:“15”},“booking_form_submit_border”:{“radius”:{“top”:“12”,“right”:“12”,“left”:“12”,“bottom”:“12”}},“message_success_bg_color”:{“hex”:“#88c200”,“id”:“duskyf”,“name”:“Color #8”},“message_success_typography”:{“color”:{“hex”:“#ffffff”},“text-align”:“center”},“message_padding”:{“top”:“8”,“right”:“8”,“bottom”:“8”,“left”:“8”},“message_success_border”:{“radius”:{“top”:“12”,“left”:“12”,“right”:“12”,“bottom”:“12”}},“message_error_bg_color”:{“hex”:“#ff001e”,“id”:“eilyho”,“name”:“Color #9”},“message_error_typography”:{“color”:{“hex”:“#ffffff”}},“message_error_border”:{“radius”:{“top”:“12”,“left”:“12”,“right”:“12”,“bottom”:“12”}},“_cssClasses”:“classic-jet-form form-with-float-and-clear-bid frattis-refresh-on-success”,“fields_label_tag”:“label”,“markup_type”:“div”,“_width”:“100%”},“themeStyles”:}],“source”:“bricksCopiedElements”,“sourceUrl”:“``https://frattis.web-forge.io``”,“version”:“2.2-rc”}

Jet engine data store element

{“content”:[{“id”:“ttjjgd”,“name”:“jet-engine-data-store-button”,“parent”:“11a1fc”,“children”:,“settings”:{“_background”:{“color”:{“hex”:“#ffffff”}},“_padding”:{“bottom”:“2px”,“top”:“2px”,“right”:“8px”,“left”:“12px”},“_border”:{“radius”:{“top”:“0”,“right”:“10px”,“bottom”:“0”,“left”:“50%”},“width”:{“top”:“1”,“left”:“1”,“right”:“1”,“bottom”:“1”},“style”:“solid”,“color”:{“hex”:“#a98269”,“id”:“edxybs”,“name”:“Color #2”}},“_position”:“absolute”,“_zIndex”:“2”,“_top”:“-1”,“action_after_added”:“remove_from_store”,“object_context”:“default_object”,“store”:“favorites-online”,“icon”:{“library”:“fontawesomeRegular”,“icon”:“fa fa-heart”},“button_icon_color_in_store”:{“hex”:“#a98269”,“id”:“edxybs”,“name”:“Color #2”},“button_icon_size”:“16px”,“_right”:“-1”,“added_to_store_icon”:{“library”:“fontawesomeSolid”,“icon”:“fas fa-heart”},“_conditions”:[[{“id”:“qhunsd”,“key”:“user_logged_in”,“compare”:“==”,“value”:“1”}]],“synch_grid”:true,“synch_grid_id”:“logged-user-online-wishlist-active”},“themeStyles”:}],“source”:“bricksCopiedElements”,“sourceUrl”:“``https://frattis.web-forge.io``”,“version”:“2.2-rc”}

Bricks builder native heading element

{“content”:[{“id”:“kybmpg”,“name”:“heading”,“parent”:“yqyrfv”,“children”:,“settings”:{“_background”:{“color”:{“hex”:“#a98269”,“id”:“edxybs”,“name”:“Color #2”}},“_padding”:{“bottom”:“4”,“top”:“4”,“right”:“8”,“left”:“8”},“_border”:{“radius”:{“top”:“12”,“right”:“12”,“bottom”:“0”,“left”:“0”}},“text”:“<i class="fas fa-clock-rotate-left"> Αναν. τιμών: <span style="font-size:12px;color:white;" class="live-refresh-countdown">”,“tag”:“custom”,“_typography”:{“font-style”:“italic”,“color”:{“hex”:“#ffffff”},“font-weight”:“500”,“font-size”:“12”},“customTag”:“span”,“_zIndex:mobile_portrait”:“20”,“_conditions”:[[{“id”:“mlacnl”,“key”:“dynamic_data”,“dynamic_data”:“{je_online-auctions_item_status}”,“value”:“active”}]],“_bottom”:“0”}}],“source”:“bricksCopiedElements”,“sourceUrl”:“``https://frattis.web-forge.io``”,“version”:“2.2-rc”}

They are exact the same if i edit in the en language in terms of copy.

[charaf]

Hi @konlal,

Just to provide you with an update: I haven’t forgotten about your report and will share any findings as soon as I have any

[konlal]

Sure, here are some other screenshots, for example it lost the text align and also added bold font weight without reason, in builder it is correct both languages, still followed same debug procedure, regenerate css etc.

[konlal]

A common finding i noticed between all elements that their style breaks is that they have dynamic visibility conditions applied. I had a button in a grid item that had no condition applied. It was working before. When i added dynamic visibility condition, the styling broke, it shows without any styling applied.Same thing happened to other elements.

@charaf confirmed the issue is when you have a condition applied, the styles of the elements doesnt apply and im afraid if the elements that have js dependency (carousels/sliders/maybe tabs if they do) js doesnt load too and i see the images in case of slider for example the one below the other. When i enable inline styles loading method from settings it fixes.

[konlal]

@charaf Hi do u have any update regarding this? I get all the time complaints from clients and i dont know what to do. Everything is breaking randomly in everything that has dynamic visibility applied and sometimes it is correct on main language sometimes on the translated and never on both..

[konlal]

[konlal]

Also translations i made in wpml in some of the elements inside templates are completely ignored. I dont know what to do so many issues and i dont know who to contact.

[charaf]

Hi @konlal,

Yes we’re looking into this bug to provide a fix, in the meantime this should be fixed if you use “inline styles” as the CSS loading method correct? This can be set from Bricks settings > Performance > CSS loading method.

[konlal]

@charaf Good morning, issue remains even with inline styles enabled, you can check it there https://frattisauctions.gr scroll down you can see in listing items (not all) the favorites heart be very big without styling(this one has a condition if user is logged in, or just search on top right by typing this 001 and try it in both languages, in one language (the en) the search results are ok and in main they are broken and the only condition they have those items in the search results is the post type. I’m glad you could replicate the issue and I’m not alone. At the end I will end up using css and I will end in a css file bigger than if I would completely custom because this issue appears very randomly in the whole website and in listing items also, in some pages they work and in some (inside single page templates) they don’t (no styles at all) and they are the same as listing items there where the exact same listing item works https://frattisauctions.gr/en/?taxonomy=online-auction-event&term=27-1)

013-CHYPRE, PAPADAKIS 1958 - Frattis Auction House - Οίκος Δημοπρασιών - Φράττης

[charaf]

Hi @konlal,

I’m able to replicate the issue with conditions in 2.2-rc2 but can no longer replicate it with v2.2 stable on my end Could you please share temporary admin access to help@bricksbuilder.io so we can investigate the issue on your setup? Please make sure to include a link to this forum thread in your email so we can track it.

[konlal]

Hell @charaf , after this message, i went to each problematic element and just click save without any edit just to test. After this everything works. Thank you very much for the time and effort you took to investigate this issue and for fixing it. I havent test with external css setting but im sure it will work with this one too