Correcting the RTL layout of the fields

Hello. 

It's going to be a long... because I'm finished building the form, but so that I could show it to customers - I up here all the problems that still exist and I have not found a solution for them.

I divided the message into 3 parts:

Part 1: General issues that happened to me in the form.

Part 2: problems related to a mobile responsive.

Part 3: Problems related to writing from right to left (like Hebrew).

Part 1: General issues that happened to me in the form.

1. Field "Phone":

When I think about it, even in English, the field does not show well - because the area code should be on the left side of the Phone number and not the right.

Am I right?

2. Field “Time"

As I wrote about the phone in section 1, the same is true for the field "Time".

3. And “Date”:

Thank you very much!!

I am now checking this for you, but I have moved the other issues to a separate thread. 

For the phone and time fields: https://www.jotform.com/answers/1041845.

For the image radio buttons: https://www.jotform.com/answers/1041848.

For the page break: https://www.jotform.com/answers/1041849.

For the dynamic dropdown widget: https://www.jotform.com/answers/1041850. 

We have to separate the issues so we can address them properly and for you and us to follow up easily. 

Inject the following custom CSS codes to your form, this is for the desktop view:

For the Phone field:

[data-type="control_phone"] .form-sub-label-container {

    float: left;

}

.phone-separate {

    display: none;

}

[data-type="control_time"] .form-sub-label-container {

    float: left;

}

For the DateTime field:

.date-separate {

    float: right;

    margin-left: 5px;

}

[data-type="control_time"] #sublabel_hour {

    display: block;

    position: relative;

    left: -15px;

}

[data-type="control_time"] #sublabel_hourRange {

    display: block;

    position: relative;

    left: -15px;

}

The result should be like this: 

Here's how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

Thanks, really helped me code to a phone, and for hours.

The problem remained only in the date. Screenshot attached.

Please try adding this CSS to your Custom CSS field:

#label_137{

float : right;

direction : rtl !important;

}

That will adjust the date field properly.

If you have any additional questions please let us know.

Thank you!

It did not help anything ...

This is how it showed for me after injecting the above CSS:

Also you can add this line in the above block:

#label_137{

float : right;

direction : rtl !important;

unicode-bidi : bidi-override !important;

}

So the whole block should look like this:

Is that what you had in mind?

Please let us know.

No.

The date and time is not well arranged on the screen.

It should be as: hours: minute  ,   day / month / year 

OR: day / month / year  , hours: minute   

Not like now: minute hours :  ,   Year  Month / Day /

Thanks!

Inject this CSS code to your form.

div#cid_93 {

    direction: ltr !important;

}

Should look like this afterward:

If you want to apply it on all the date fields, use this:

[data-type="control_datetime"] {

    direction: ltr !important;

}

Hope this helps!

Thank you. Helped me a lot in all this!