Correcting the RTL layout of the fields

  • Profile Image
    yedidya
    Asked on January 20, 2017 at 08:23 PM

    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?

    טלפון1.png

     

    2. Field “Time"

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

    שעה.png

     

    3. And “Date”:

    תאריך1.png



     



     






     

     

     

     

    Thank you very much!!

  • Profile Image
    Welvin
    Answered on January 21, 2017 at 06:44 AM

    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. 

  • Profile Image
    Welvin
    Answered on January 21, 2017 at 07:06 AM

    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

  • Profile Image
    yedidya
    Answered on January 21, 2017 at 01:31 PM

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

     

    The problem remained only in the date. Screenshot attached.

  • Profile Image
    Nik_C
    Answered on January 21, 2017 at 03:01 PM

    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!

  • Profile Image
    yedidya
    Answered on January 21, 2017 at 03:31 PM

    It did not help anything ...

  • Profile Image
    Nik_C
    Answered on January 21, 2017 at 03:51 PM

    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.

  • Profile Image
    yedidya
    Answered on January 21, 2017 at 04:08 PM

    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!

  • Profile Image
    EltonCris
    Answered on January 21, 2017 at 08:57 PM

    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!

  • Profile Image
    yedidya
    Answered on January 21, 2017 at 09:50 PM

    Thank you. Helped me a lot in all this!