CSS to force RTL - not working anymore?

Hi,
Has anyone noticed a change in the response (or lack of) by Glide apps to the CSS we use for RTL (inside Rich Text)?
Is there no way to add the same rich-text components to all pages, to make them RTL, regardless of which components are actually used on that screen?
Thanks

Are you saying that the CSS stopped working? Are you using stable class names (classes with random numbers and letters)? If so, those unstable class names can and will change on occasion when glide makes updates. If possible, use stable class names that do not change. Not all components or screen elements provide stable class names. CSS is not a supported glide feature, so there is no guarantee that it will keep working. Also remember that unstable class names can differ between different Devices/OS’s/Browsers.

From what I’ve read from other user’s attempts at using CSS to force RTL, it seems like there is a lot that has to change to make it work. You could always create a template column in your user profile table to hold all of your CSS, and then apply it to rich text components on each screen, where it pulls the CSS from the user profile. That way you only have to set up the CSS once, and if you need to change the CSS, you only need to change it in the template column, within the user profile, and it will automatically apply to all rich text components that pull the value from that template in the user profile.

I’m not sure what’s all involved with getting RTL to work. I’m sure it’s gross. So, I’m not sure how many nuances that need to be accounted for from screen to screen.

You hit the nail on the head. Gross is an understatement. It’s incomprehensible that Glide doesn’t provide native support for RTL.

So what do we do with these?
Is there perhaps one unified list of class names?

I have been trying to build this myself, without great success. I would be very grateful if another member here would be kind enough to share their template of such a “catch-all” template.

1 Like

Totally understand that native support should be something for glide to consider. There’s definitely a handful out there that use it.

Unstable class names are tough to track down. I think they are dynamically generated elements that can differ per device, so they are given dynamic names. As for stable classes, CSS in glide is all about trial an error until you find something that works. I’m not aware of any unified list that someone has taken the time create.

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.

1 Like

Well, I’m probably wrong and I’d be happy if any of the CSS wizards could correct me. I added the following lines to the richtext and they seem to be a catch-all alignment fixer. I’m sure it’s not “stable” or usable, but perhaps it’s a direction to explore?

[id="phone-content"] {
text-align: right;
direction:rtl!IMPORTANT;
}

[id="tablet"] {
text-align: right;
direction:rtl!IMPORTANT;
}

One downside here is that it messed up my buttons layout (“button bar” component), i.e. left button is now on the right and vise-versa. All buttons are linked to custom actions so I’m concerned to switch them manually. Ideas?

BTW - Is there no Desktop view? only phone and tablet?

Tablet view is also the desktop view, if you enable tablet mode.

Thanks. That’s what I assumed. I’m puzzled by the fact that even of tablet/desktop view, we’re still using ~50% of the screen width. Sure, we can change it something higher, but this will again mess up other things (like the button-bar going inverted).
I know that Glide Pages are more desktop oriented, but does it mean Glide Apps is a no-go for desktops and bigger screens? Is there a reason/logic behind it (apart from marketing)?

@ThinhDinh I’ve been told you’re the CSS-master around here. Any thoughts on this?

try Code Book… free app full desktop :wink:

I’m inclined to think this is a joke that I don’t understand. Is that so?

no… just click it when you are on the desktop… i will see

I’m on desktop now. What am I missing?

did you click Code BOOK? it is right under your post

bienvenue dans le code book mon ami français lol

I think those are stable classes, but I usually avoid messing with classes that are that high up in the hierarchy.

It’s not a definite no go, but Glide Pages is much better, in my opinion.

Hi @ThinhDinh,
Any ideas on this issue?
Thanks

Brand new to Glide…but is there CSS? I haven’t seen an option for that. Am I missing something?

Welcome on board :new:
To my best knowledge, this isn’t a native/supported feature of Glide. We use the “rich text” component to infuse the screen with CSS.

That’s why I said I wouldn’t touch classes that high up, since it likely mess with quite a few of your components.

There’s probably a way to reverse that, but you have to add that to every component that is affected, and that would take a huge amount of time to do so.

Wouldn’t you be able to “reverse” the actions and titles the way you want, though? Or is it too much to rebuild those?

It’s quite a lot to rebuild them as they’re associated to custom actions. If only Glide would have kept an “custom action” registry…

1 Like

So far I have seen this affect only button-bar and simple table. Simple table is of course easy to reverse on the component setting. Button-bar, however, is rather complex to reconfigure. Any ideas how to solve this with CSS?