# CSS to force RTL - not working anymore?

**URL:** <https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483>\
**Category:** Ask for Help\
**Created:** [March 10, 2022, 4:35pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483 "2022-03-10T16:35:35Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 18, 2022, 11:45pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/21 "2022-03-18T23:45:48Z")

</div>

You can apply this to any components that were affected.

```auto
div[id*='screenScrollView'] > div > :nth-of-type(1) {
direction: ltr !IMPORTANT;
}

```

Please replace 1 by the order number of the component on the screen.

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 19, 2022, 6:53pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/22 "2022-03-19T18:53:23Z")

</div>

> [@ThinhDinh](#):
>
> `screenScrollView`

Now I can understand why you said it’ll be a headache… 🙂  
If I understand ScrollView correctly, it doesn’t differentiate between component type.  
Is there no way to “target” just the effected components types/classes? As of now, I think it’s just the button bar that is the main problem. Alternatively, perhaps you have an idea about how to “migrate” custom action from the right button to the left one, and vice-versa?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 19, 2022, 11:36pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/23 "2022-03-19T23:36:20Z")

</div>

> [@Test\_Test](#):
>
> If I understand ScrollView correctly it doesn’t differentiate between component type. Is there no way to “target” just the effected components types/classes?

It’s just a div level that houses all the components, and I’m using nth-of-type to target the specific affected component. That’s why I said you have to do it for all the button bars on your screen, and it might be a headache.

Your case here, with a button bar, is a component that doesn’t have a stable class, hence why I had to use this method.

> [@Test\_Test](#):
>
> Alternatively, perhaps you have an idea about how to “migrate” custom action from the right button to the left one, and vice-versa?

No, I don’t have one. Sorry. I wish there’s a “custom action library” for each app where we can reference it instead of having to rebuild.

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 20, 2022, 7:36am UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/24 "2022-03-20T07:36:56Z")

</div>

> [@ThinhDinh](#):
>
> button bar, is a component that doesn’t have a stable class,

```auto
class="app-button-view"

```

In the past, I seem to recall that this class has worked, but it doesn’t anymore. Is this correct?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 20, 2022, 8:37am UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/25 "2022-03-20T08:37:17Z")

</div>

That is for a button, not a button bar.

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 21, 2022, 1:55pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/26 "2022-03-21T13:55:56Z")

</div>

> [@Jeff\_Hager](#):
>
> I believe @Gideon_Lahav_Busines and @Lin_Altshuler have done quite a bit with RTL along with a few others. Maybe they can point you in a direction or share some of their knowledge.

Shalom @Gideon_Lahav_Busines and @Lin_Altshuler,  
Perhaps you can assist with your go-to CSS for RTL? or any other technique for localizing a Glide App to RTL.  
Thanks

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [March 21, 2022, 2:38pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/27 "2022-03-21T14:38:41Z")

</div>

Hi there,

@Test_Test you can the following to a “rich text” component to all of your screens in Glide app only.  
In pages not possible to do this.

It will make most of your app in RTL

````auto
<p><style>
[data-test="glide-app-bar"] 
{text-align: center;
direction:rtl; 
}
</style></p>

<p><style>
[data-test="app-text-box"] {
text-align: start;
direction:rtl;
}
</style></p>

<p><style>
[class="sc-bQdQlF dcOMra"] {
text-align: start;
direction:rtl;
}
</style></p>

<p><style>
[class="sc-hqUewE irkNoB"] {
text-align: start;
direction:rtl;
}
</style></p>

<p><style>
[class="label"] {
text-align: start;
direction:rtl;
}
</style></p>

<p><style>
[data-test="tile-item"] {
text-align: center;
direction:rtl;
}
</style></p>

<p><style>
[data-test="app-horizontal-list"] {
text-align: start;
direction:rtl;
}
</style></p>

<p><style>
[data-test="app-switch-view"] {
text-align: start;
direction:rtl !important;
}
</style></p>

<p><style>
[data-test="app-text-field"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[data-test="app-picker-button"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[data-test="app-switch-view"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[data-test="list-item-title"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[data-test="list-item"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[class="sc-kNnYhR WdOSc"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[data-test="app-inline-picker"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[role="row"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[class="sc-htmbXw fgLAlN"] {
text-align: right;
direction:rtl !important;
font-family: alef;
}
</style></p>

<p><style>
[data-test="app-vertical-list"] {
text-align: right;
direction:rtl !important;
font-family: alef;
}
</style></p>

<p><style>
[class="sc-httYMd dhAqBk"] {
text-align: right;
direction:rtl !important;
font-family: alef;
}
</style></p>

<p><style>
[class="tbs-inner"] {
text-align: right;
direction:rtl !IMPORTANT;
    BORDER-TOP-COLOR: #08102A !IMPORTANT;
    BORDER-TOP: 1PX SOLID;
}
</style></p>

<p><style>
[class="sc-jWETFE grREqF"] {
    border: 0px;
    background: none;
    BORDER-LEFT: 0.5PX SOLID !IMPORTANT;
    BORDER-RADIUS: 0PX;
    BORDER-COLOR: BLACK !IMPORTANT;```
````

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 21, 2022, 2:46pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/28 "2022-03-21T14:46:28Z")

</div>

> [@Gideon\_Lahav\_Busines](#):
>
> ```auto
> <p><style>
> [class="sc-bQdQlF dcOMra"] {
> text-align: start;
> direction:rtl;
> }
> </style></p>
> 
> <p><style>
> [class="sc-hqUewE irkNoB"] {
> text-align: start;
> direction:rtl;
> }
> </style></p>
> 
> ```

Aren’t these unstable classes? i.e. prone to change by Glide?

BTW - I’ve learned the hard way that we should remove the following from the middle of the text. Should be just at the top and bottom of the text box, otherwise it’ll “eat up” screen space.

```auto
</style></p>

<p><style>

```

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [March 21, 2022, 3:51pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/29 "2022-03-21T15:51:17Z")

</div>

Cool I did know it.

It is working for me for few months now

בתאריך יום ב׳, 21 במרץ 2022 ב-9:56 מאת Test Test via Glide Community \<[glideapps@discoursemail.com](mailto:glideapps@discoursemail.com)\>:

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [March 23, 2022, 7:04am UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/30 "2022-03-23T07:04:39Z")

</div>

Give this a try:

```auto
<p><style>
[data-test="app-tf-text-input"],[data-test="app-text-box"],[data-test="app-file-picker"],[data-test="app-signature-field-view"],[data-test="app-rating-component"],[data-test="app-inline-picker"],[data-test="list-item"],[data-test="app-vertical-list"],[data-test="list-item-title"],[data-test="app-checkbox-list-item"],[data-test="app-hint"],[data-test="app-picker-button"],[class="labels"]{
text-align: right;
direction:rtl;
}
</style></p>

```

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 23, 2022, 10:24am UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/31 "2022-03-23T10:24:10Z")

</div>

> [@Lin\_Altshuler](#):
>
> Give this a try:
> 
> ```auto
> 
> ```

Thanks!

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [October 19, 2022, 9:57pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/32 "2022-10-19T21:57:36Z")

</div>

You can read this

> **[How to adapt Glide to RTL? - Gideon Lahav](https://gideonlahav.com/glide_blog/how-to-adapt-glide-to-rtl/)**
>
> As of the date of publication of this post, it is not possible for the platform to align the various components to the right naturally. This can be solved by planting a code I made

I use the same CSS

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [October 24, 2022, 4:45pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/33 "2022-10-24T16:45:34Z")

</div>

> [@Gideon\_Lahav\_Busines](#):
>
> You can read this
> 
> [https://gideonlahav.com/glide\_blog/how-to-adapt-glide-to-rtl/](https://gideonlahav.com/glide_blog/how-to-adapt-glide-to-rtl/)

Thanks, but this doesn’t do the trick. It creates a mess for certain layouts, such as calendar (See below), list, etc. This works for “details” layout.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/7/37ae99b990f26a6ebebd50295612284a969b6a58.png)

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [October 24, 2022, 6:00pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/34 "2022-10-24T18:00:33Z")

</div>

Share your screen where you put the rich text component

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [October 24, 2022, 6:45pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/35 "2022-10-24T18:45:33Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/c/ac22d9a4b5380b2973f6da88c464a69148bd48ee.png)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/1/211f7cc2b4be6a9ede3baa70de4a6a37a69c6de1.png)

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [October 24, 2022, 7:10pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/36 "2022-10-24T19:10:57Z")

</div>

Try this

````auto
<p><style>
[id="app-root"] {
text-align: start;
direction:rtl;
}
</p></style>```
````

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [October 24, 2022, 7:22pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/37 "2022-10-24T19:22:13Z")

</div>

> [@Gideon\_Lahav\_Busines](#):
>
> ```auto
> 
> ```

What are these for?

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [October 24, 2022, 8:54pm UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/38 "2022-10-24T20:54:05Z")

</div>

Replace this with your current CSS

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [October 25, 2022, 4:37am UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/39 "2022-10-25T04:37:00Z")

</div>

I meant what are these for  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/7/6702992533b2d19645648b6ac5cd290e1d310421.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 25, 2022, 5:26am UTC](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483/40 "2022-10-25T05:26:01Z")

</div>

That’s just the end of the code block. They should have been on a new line. You can ignore them.

[Previous page](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483.md?page=1)

[Next page](https://community.glideapps.com/t/css-to-force-rtl-not-working-anymore/39483.md?page=3)