CSS to force RTL - not working anymore?

Ask for Help
41

Tried this. Sadly, same result.
Only screens with “details” layout are indeed rendered RTL properly. All other layouts are jumping all over the place. I’ll try to explain a bit more. When the screen is opened for the first time, before user selected an item, it renders OK, as below

image
image820×616 38 KB

Once an item is selected, any item, the rendering “jumps”. More specifically, three main problems:

  1. the item list that was on the left side on the previous screenshot, is now moving to the right (which is actually its proper position).
  2. The header (screen name at the top) is moving from the right to the left, which isn’t its proper position.
  3. Item title is presented on the top right corner, but above the screen name (which is actually on the left, as per point 2 above).
    as below
    image
    image819×619 55.8 KB

The proper order should be:

  1. Item list on the right
  2. Top right (or center): Screen name
  3. Below screen name, item title.

Thanks

1 Like
42

Only screens with “details” layout are indeed rendered RTL properly.

— TRUE, you can only use it in details

43

No solution for the other layouts?

1 Like
44

No

45

Perhaps our resident Dr.CSS, @ThinhDinh, can assist?

46

If he can, I’ll eat my shoe.
In order to apply CSS in Apps, you need to be able to add a rich text component to the screen.
With a list layout you cannot do that, so you cannot apply CSS to list layouts.
This is a general limitation, and has nothing to do with RTL.

1 Like
47

Pretty safe bet eh haha

1 Like
48

I understand that and this is why the list view appears LTR when opened and no item is selected:

The thing is that once you do click on an item in the list view, it opens the details view. On that details view, we can add CSS.

The fact that the screen “changes” when clicking an item for the first time isn’t evidence that we can think of a solution?

49

The list-left, details-view-right layout is exclusive to Apps, and it doesn’t change the fact that you can’t add CSS to a non-details view layout. There’s no way out of this, the CSS will only load when you actually click on an item, in your scenario.

50

Glide Apps are the best! waiting for pages to fallow :wink:

51

Indeed, this is exactly the moment I am referring to. I understand that prior to selecting an item, the list will be on the left and we can live with that.
My question is how can we fix the below issues:

image
image1469×205 29.5 KB

Once the CSS is loaded, the list itself does move to the right, but the image above shows other elements which aren’t positioned properly.
Any ideas?

52

So you want it to be like this?

It’s too much of a change and I have no idea how it can be done. It can also affect other layouts of the same view a lot.

53

:slight_smile:

54

You’re happy we’re stuck? Not very nice of you :stuck_out_tongue_winking_eye:

You’re also quite the CSS wiz. Can you make some magic? Perhaps we can even remove these elements all together

1 Like
55

see the magic behind the transparent door

56

Your magic looks great, as always. But how does this relate to our CSS/RTL challange?

57

it is all behind that door

58

Cryptic.
I’ll try to figure out this riddle.
Feel free to give me some hints :slight_smile:

59

i just did lol

60

What @Uzo is trying to say is that you need to book an appointment with him, pay him for his time so that he can tell you what the other experts like @Darren_Murphy @ThinhDinh have already said…
If these guys say it is not possible as yet, trust them and you won’t have to part with your money…lol :wink::hugs: