I'm having trouble changing the direction to right-to-left by setting the Locale (e.g. Arabic).
The documentation on Right-To-Left states:
To translate your application to, for example, Arabic, you just need to set the locale "ar" and the RTL is applied by default.
I might be doing something wrong because this doesn't seem to work. I've tried multiple ways (using SetCurrentLocale, SetLang or applying the .is-rtl class directly on the body during the OnReady event).
I've attached the OML of my attempt.
Any help would be much appreciated.
Hi Paulo,
Thanks for the reply.
Meanwhile, I did some further tests and I think I figured out how to make it work.
It seems that for the SetCurrentLocale to work correctly, you need to add a Locale on the Multilingual Locales folder and have at least one field filled (doesn't matter the content).
I've attached an OML of a working version.
@Nelson Rodrigues Hi,Indeed for some reason setting "ar" as current locale is not adding the rtl automatically.Instead, try placing in your OnReady action the following JS node:document.body.style.direction = 'rtl';Just tried this on your .oml and it seems to work.Let me know if this helps!Cheers,Paulo
Little update on this. For this to work correctly all screens should have matching translations set otherwise it won't apply the is-rtl class automatically.
For example, when using SetCurrentLocale in the Application Ready event. If the first screen loaded doesn't have a matching translation it won't apply the class to the <body>, there's probably a reason for this. Nonetheless I would still like to have a way of forcing the RTL without having to resort to hacks like this.
Problem is when we use translation from Outsystems the Scroll bar goes to the left for example and some another problems happens!
That's probably the expected behavior for most cases.
Have you run into a scenario where you need to set the RTL while keeping the scrollbar on the right? Just curious.
The scroll bar should stay on right side :) In arabic main of thing are RTL but not all, numbers for example is LTR.
When is needed translations I think it's better to use is-rtl on layout or *{direction:rtl} in theme. Maybe the solution from @Paulo Ritto it's also good, I have to try.
Applying the RTL just on the layout won't affect some components that are outside of it, the Feedback Message, for example.
Do you have any sources on the best practices when it comes to the position of the scroll bar? I did a quick search but wasn't able to find a consensus.
Yes, maybe not affects all components. I'll try to find the best approach :)
About scroll bar there is no best practices, is related with arabic language, if you check any WebSite you will see what I'm talking about.
For example: https://www.emirates.com/il/hebrew/book/?gclid=Cj0KCQjwteOaBhDuARIsADBqRegvGhWSyO-P2hHTB1c6DFo8Et73vUNfinlgV5jV_Jtw40etyiOwZwIaAkI1EALw_wcB&gclsrc=aw.ds