Text direction and form fields alignment

  • HilahSegal
    Asked on November 8, 2015 at 10:36 AM

    Hello :)

    Thank you for your respond. However, according to your suggestion, only the "text area" and the "radio Button" are on the left side, and the text is on the right.

    Please advise,

    Thank you,

    Hilah

  • Jan
    Replied on November 8, 2015 at 10:52 AM

    I presume that you are working on this form (http://www.jotform.me/form/53044054915451).

    I can see the text fields are already directed from right to left.  I can also see the fields at the right.

    Text direction and form fields alignment Image 1 Screenshot 20

    May I know what is the issue here? Are you referring to the distance between the label and the form field?

    We'll wait for your reply. Thank you.

  • Hilah
    Replied on November 9, 2015 at 8:01 AM

    I would like to swich between the text and the boxs etc.

    In Hebrew questionnairesthe text should be on the right and the "fill in" space should be on the left. (As I've put in the picture attached)

    Is this something that possible?

    Thank you,

    HilahText direction and form fields alignment Image 1 Screenshot 20

  • Jan
    Replied on November 9, 2015 at 10:16 AM

    Yes, it is possible. Please check this demo form. Here's a guide on how I did it.

    1. Make sure that the Label is on the top of the field.

    Text direction and form fields alignment Image 1 Screenshot 30

    2. Please inject this custom CSS code:

    .form-sub-label {direction:rtl;unicode-bidi:bidi-override;}

    .form-all {direction:rtl;}

    .form-line-column,.form-label-right,.form-radio-item {float:left;}

     

    3. Now, you need to get the ID selector of the field so that you can align or position it on the left. I used Google Chrome Inspect Element in order to identify the selector.

    Text direction and form fields alignment Image 2 Screenshot 41

    After that, you'll need to add another CSS code that targets those selectors. On that form, here's the additional CSS code I've used.

    #cid_3, #cid_4 , #cid_5 { text-align: left;}

     

    Hope that helps. Let us know if you have any questions. Thank you.