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
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>
Thanks!
You can read this
I use the same CSS
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?
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.