Change the labels to be oriented right-to-left

After I put the code in CSS design to change the display to "from right to left," still does not solve the problem.

This solves only when I set the question will be on the right side, but if I set it to be on the top, or I set it to be over half the width (and not full width) - It does not show me any good. (Screenshot attached).

I'd love to hear how I solve the problem. You might need to add additional code?

Thanks.

I see that the CSS code you are currently using is this:

.form-all {
    text-align : right;
    direction : rtl !important;
    unicode-bidi : bidi-override !important;
}
.form-line-column,
.form-label-right,
.form-radio-item {
    float : right;
}

Please try adding the following line as well:

.form-label-top { text-align: right; }

Please let us know should you need any further assistance, we'll gladly help. Thank you!

Thanks, I'll be happy to assist further.

1. Is it possible to set the button "Auto" will be the right direction to the left and not the opposite as defined in now? 

2. If the attached screenshot (and can be would encounter similar cases in the future) created a problem.

On the one hand I have the question will appear on the right, but the box when customers fill should be from left to right because it numbers, and numbers are always written from left to right.

 https://form.jotform.me/70147407208451

Do you have a solution for the domestication of the above?

Thanks.

I'm sorry but I had a hard time understanding your request. So we might need additional info.

1. Is it possible to set the button "Auto" will be the right direction to the left and not the opposite as defined in now? 

What are you referring here to 'Auto' please? If it is easier please share the screenshot.

To do that please follow:

1. Go to this link: https://www.jotform.com/answers/1035599

2. Click this icon: 

Regarding your second question, I see that my colleague provided you with CSS code that will make your form right to left. But I'm not sure what is your exact request and with which field. So if you can give us that information it would be great so we can continue with resolving this issue.

We'll wait for your response.

Thank you!

For point 1 - attached screenshot.

For point 2 -

 The issue I'm having is with the phone number field. Even though question is presnted from right to left, in the phone number field the area code and number are still the other way round. Would it be possible to switch between this two?

Thank you. 

Thank you for clarification.

For your first question please copy and paste the below CSS code instead of the CSS code you already have in your Custom CSS field:

.form-sub-label {

direction:rtl;

unicode-bidi:bidi-override;

}

.form-label {

float:right!important;

}

.form-all {

text-align : right;

direction:rtl!important;

}

.form-line-column,

.form-label-right,

.form-radio-item {

    float: right;

}

I added few lines there to the existing ones, but it's easier if you just replace the whole code. Then switch your labels to Auto. That will make the label go right. I tested and it worked.

Now, regarding the phone number. 

This is my clone of your form: https://form.jotform.com/70157006773959

Please check it, the area code is on the right-hand side and the number is on left. But, again, please double check, I'm not sure if that is what you had in mind.

We'll wait for your response.

Thank you!

Thanks for the comment.

For the first problem, it does not solve my problem.

It does something about how the fields are written the words, but the not fix the problem I talked about, the idea was that I would not have any time to enter the "Label Alignment" and select "right" in any field I add,

Why the code does not work? Because it infects the "question" of "field" without interval, something that should not happen and does not happen when I press "right" in the "Label Alignment".

For the second problem, I need the area code will be displayed on the left, and the telephone number on the right, when the question will remain on the right side on screen.

Finally, I see that the matter of the "RTL" creates a lot of confusion, in particular, do not speak English and I need to translate my posts.

So I will try to get by on my own until you settled it in a comprehensive way.

Solution to the second problem is more important to me than a solution to the first problem.

This is the form I'm working on now:

https://form.jotform.me/70147407208451

Hello yedidya,

One of the option to display the area code on left and telephone number on right is by changing the sub-label and width of both the textbox. Please check the screenshot below:

If this is what you want to achieve, you need to change the sub-label of the textbox and inject the following custom css code:

input#input_8_area {

    width: 94px;

}

input#input_8_phone {

    width: 53px;

}

Please take a look at the following cloned form where I have made the changes:  https://form.jotform.com/70158539817970 

Feel free to clone this form for a closer look. The following guide should help you in form cloning:  https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Thank you!

It is good. Only one problem remains.

The AutoFill fills the area code in my phone number, and vice versa - then we should change it.

Thanks.

I assume you mean the Autofill feature from the Browser?

I'm not sure why that would change since the fields remain the same, what my colleague did is adjusting their appearance with CSS. But, anyhow, let me investigate this a bit more and I'll get back to you.

Also, please let us know if I misunderstood your question.

Thank you!

Yes, i mean the Autofill feature from the Browser.

Please show me how I can also set it to work on any field of telephone,

Because now if I'm duplicating or creating a new field of the phone - it comes back to default.

Thanks!

For the problem I mentioned:

"The AutoFill fills the area code in my phone number, and vice versa - then we should change it."

It is strange,

Because in this web really shows a problem, but in a mobile - it look right.

Thank you for your patience.

It is a strange problem, I agree. Since the field's ID didn't change they were just adjusted with CSS. But, anyhow, from what you were describing those fields needed to be switched and I did something with CSS. Please check my clone of your form if it is working for you now: 

For your reference here is the CSS code I used:

#input_8_area {

    float : left!important;

    margin-left : -125px;

    width : 60px;

}

.phone-separate {

    float : left;

    margin-left : -55px!important;

}

#input_8_phone {

    float : right!important;

    margin-left : -25px!important;

    width : 25px;

}

#sublabel_phone {

    float : left;

    margin-top : 30px;

    margin-left : -80px;

}

#sublabel_area {

    margin-top : 30px;

    margin-left : -45px!important;

    margin-right : 10px;

}

Also, I did a change on this page:

It needs a bit of adjusting but I wanted to test with you first.

Please let us know how it works for you.

Thank you!

Hi,

Does not look good at all. Especially on mobile.

https://form.jotform.me/70163936438461

In addition, see the bottom - I do not understand what happened in the field "Phone".

PS: I see a lot of headache from "RTL".

Yes, I agree it is a complex problem.

I'm sorry that my CSS didn't work. You can remove it, please.

I did some tests again, and I did the autofill. What I noticed, and actually I mentioned that in my previous reply, is that IDs of the fields didn't change so area code field's ID is still area code and the phone's ID is still phone field. They just switched places. So my autofill actually worked fine, it populated as expected. Also, I just recalled that you mentioned that in your phone it worked fine. 

Could it be that your autofill in the Browser is doing this?

Because it doesn't make sense to me that it doesn't work with the current setup. What I tried, with the last CSS, is to switch places of those two fields, but again that wouldn't make sense. A browser will look for the type of field in the form to autofill it. So if the field is area code or phone, it will autofill them by using that type. 

I was thinking, also, about turning off the auto complete for that field, but that is not possible with CSS, unfortunately. It can be done with HTML or JavaScript, but not with CSS.

Maybe I overlooked something so feel free to correct me. 

I'll try to think about some other options.

We'll wait for your response.

Thank you!

I returned to the source code. But it does not fit as I said earlier.

Attached a screenshot of the preview after Chrome's autofill + test code.

Please allow me some time to go through the previous responses and get back to you with relevant information.

Thank you for your patience.