RTL support

[mohammad_altoiher]

Does the ui builder now support RTL after the css changes?

[vladimir-upirov]

Hello @mohammad_altoiher

you can try to create a new App Extension, for instance rtl and add the following content

body {
  direction: rtl;
}

However, there are some issues with Input Components

Regards, Vlad

[mohammad_altoiher]

i think its doable with more changes in the css then.
Thanks

[Rami_Zalmanov]

Hi,
@vladimir-upirov, @mohammad_altoiher
Could you please post an update about the RTL issue?
Is it possible to solve the direction in CSS?
I’ve added the body direction: rtl to the CSS,
but couldn’t change the labels alignment in a form.

Regards, Rami

[mohammad_altoiher]

Hey
i stopped trying since it require a lot of css to make it work with all the form elements
it will be better if the backendless team add it for consistency and better management

[Rami_Zalmanov]

@vladimir-upirov @mohammad_altoiher
This is a solution I’ve found so far,
it’s not perfect but it seems to work for most of the elements.
If you have any improvements - please let me know:

body {
direction: rtl;
}

.MuiInputLabel-formControl {
right: 20px!important;
margin-right: 10px!important;
}

.MuiInputBase-input {
margin-right: 10px;
}

.jss61, .jss62 {
text-align: right!important;
}

.MuiInputLabel-shrink {
transform: translate(20px, 1.5px) scale(0.75);
transform-origin: right;
}

.MuiInputLabel-filled.MuiInputLabel-shrink {
transform: translate(5px, 10px) scale(0.75);
transform-origin: right;
}

.MuiInputLabel-formControl {
transform-origin: right;
}