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

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.

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 :slight_smile:

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.

1 Like

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.