You can apply this to any components that were affected.
div[id*='screenScrollView'] > div > :nth-of-type(1) {
direction: ltr !IMPORTANT;
}
Please replace 1 by the order number of the component on the screen.
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?
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.
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.
class="app-button-view"
In the past, I seem to recall that this class has worked, but it doesn’t anymore. Is this correct?
That is for a button, not a button bar.
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
1 Like
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
<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;```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.
</style></p>
<p><style>
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>:
Give this a try:
<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>
1 Like
Thanks!
You can read this
I use the same CSS
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.
1 Like
Share your screen where you put the rich text component
Try this
<p><style>
[id="app-root"] {
text-align: start;
direction:rtl;
}
</p></style>```What are these for?
1 Like
Replace this with your current CSS
I meant what are these for
That’s just the end of the code block. They should have been on a new line. You can ignore them.