Using SetCurrentLocale to apply right-to-left

Back to Forums

Nelson Rodrigues

Solved

Using SetCurrentLocale to apply right-to-left

Question

Mobile

Reactive

Application Type

Mobile, Reactive

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.

SandboxReactive_RTL.oml

04 May

Nelson Rodrigues

Solution

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.

See solution in context

SandboxReactive_RTL_02.oml

04 May

Paulo Ritto

@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

04 May

Nelson Rodrigues

Solution

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.

SandboxReactive_RTL_02.oml

04 May

Nelson Rodrigues

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.

14 days ago

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines