Supporting RTL in Tabs control

Hello,

I am trying to use "Navigation/Tabs" control on Mobile application.

My app is in Hebrew witch means that everything is rtl.

I added css block:

*{direction:rtl}

The "Navigation/Tabs" looks OK, but content appears only in the first tab.

I saw that there is an inline css in one of the divs that has been calculated for the selected tab:

When I am changing the "-768px" to "768px", the content appears.

I tried to call "SetCurrentLocale", didn't see any change.

How can I set the controls direction for the tabs and for the entire application?

Thanks

Hi Batel,

One thing that that Tabs component does to check if it's RTL, is to check if there is some element in the page with the class "is-rtl".

So, add the class "is-rtl" to one of the elements in the page. That will do the trick.

You still need the {direction:rtl}...

Cheers,

José

José Costa wrote:

Hi Batel,

One thing that that Tabs component does to check if it's RTL, is to check if there is some element in the page with the class "is-rtl".

So, add the class "is-rtl" to one of the elements in the page. That will do the trick.

You still need the {direction:rtl}...

Cheers,

José


Hi,

Thank you for your replay!

I tried to add this class to the page, but steel have the same behaviour :(

By the way, how do you know what components require to work properly? Is there any good documentation?

Thank you very match!

Hi Batel,

You should use following component:
https://www.outsystems.com/forge/component-overview/1784/multilingual-mobile-component

You don't need to explicitly add RTL direction in your CSS.

You just need to add following into your Translation Json file:
[{
"locale": "en",
"isRightToLeft": false, -- Here you can mention your locale and isRightToLeft as True
"translations": {.....}

}]


Please check this demo for more details:
https://www.outsystems.com/forge/component/1785/multilingual-to-do/


Regards,
Palak Patel

Palak Patel wrote:

Hi Batel,

You should use following component:
https://www.outsystems.com/forge/component-overview/1784/multilingual-mobile-component

You don't need to explicitly add RTL direction in your CSS.

You just need to add following into your Translation Json file:
[{
"locale": "en",
"isRightToLeft": false, -- Here you can mention your locale and isRightToLeft as True
"translations": {.....}

}]


Please check this demo for more details:
https://www.outsystems.com/forge/component/1785/multilingual-to-do/


Regards,
Palak Patel

Hi Palak Patel,

Thank you very match!

I tried your solution, "is-rtl" class is added automatically now and as you said I don't need the "direction:rtl" anymore.

Unfortunately, my Tabs still look the same :(

When I debugged the JS of the tabs step by step it worked (I was able to see the second tab content), so I believe it has something to do with the the order of loading/asynchronous.


Hi Batel,

If possible, please provide a sample oml file so that we can identify the root cause for this issue.

Regards,
Palak Patel

Palak Patel wrote:

Hi Batel,

If possible, please provide a sample oml file so that we can identify the root cause for this issue.

Regards,
Palak Patel

Hi,


Attached.

Now I see that when I use the "is-rtl", clicking on the button in the bottom of the first tab loads the second tab correctly. The problem is only when I'm loading the second tab by clicking on it directly when the page loads.

Hi, 

Any sugestions?