RTL support

mohammad_altoiher · January 11, 2021, 10:51am

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

vladimir-upirov · January 11, 2021, 10:58am

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 · January 11, 2021, 11:00am

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

Rami_Zalmanov · July 11, 2021, 2:50pm

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 · July 11, 2021, 3:10pm

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 · July 11, 2021, 9:01pm

@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;
}