124
Views
9
Comments
Supporting RTL in Tabs control
Question

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

mvp_badge
MVP
Rank: #62

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é

Rank: #299

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

Rank: #299

Hi Batel,

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

Regards,
Palak Patel

Rank: #24480

Hi, 

Any sugestions?

Rank: #72958

Hi,

Facing same issue kindly post your suggestion to sorted out.


Regards

Dhinesh


mvp_badge
MVP
Rank: #62

Hi Dhineshkumar,

As I mentioned in my previous post I just did two things to make it work.

1. Added the following CSS to the screen:

*{direction:rtl}


2. Added a container to the screen and set the class "is-rtl" to it:

Check my oml.

Cheers,

José

RTLTab.oml