Hi, I am creating an web app where user can change langages. But in the Same times if they chose a Middelt east langage this css code run :
<style>
body, html {
direction: rtl !important;
text-align: right !important;
}
</style>
This code work when I put it in the Advanced setting Meta Tag Header. But it runs for all the langages. I do not know and i can’t find how to create a dynamic value that When this condition is true this Css code Run . Need help from the community
Place your CSS in an HTML element on the page itself, not in the global settings. Then, use a conditional rule on that element to control its visibility based on the currently selected language.
When it visible this css will run, when not it wont. But you also need to refresh the page if its unselected, as this is a limitation i found once we show a css via html hiding it wont take the effects away.
Thanks for your Answer. You are right with your solutions. However I have a funny patterns. When I apply your solutions. The Code runs but it is applying on every langage set up in Bubble in LTR and those who are set up in RTL on Bubble stay in LTR
Then use class, you can use classify plugin to give class to bubble.io groups, and use the class to change the direction from one way to another.
User classify, it’s very easy you read its manual on how to set class for each group you want to change. Then you ask gpt to modify your code to only effect those with your specified class.
With using class you can past the code in meta tag once and just use conditions to change group class when you need to change the direction of elements.
If you like i can help you do it, for free
I have never used classify. Do you have a youtube video about it ?
I have looked. it doesnt work. it is a very interesting behavior on Bubble. in my Header tag i have this code css :
body, html {
direction: rtl;
text-align: right;
}
when a user change his langage for exemple to French (LTR) this code runs. but when a user change to a langage in (RTL) this code does not run. So I try the opposite way with this code :
body, html {
direction: ltr;
text-align: left;
}
. I supposed it will work by doing the opposite way. But no the french ( LTR ) stay in LTR and the other language in (RTL) stay in LTR position
Are you okey to allow me set this up for you sir ?
A lot of the times, you have to add !important after each value, to force the page to override these settings.
@ThomasC2A he add added !importan; , usign class for specific group he want to change direction will solve his issue.
It doesnt work even with ! important
body, html { direction: rtl !important; text-align: right !important; }
