What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    CSS - Can I mirror the Matrix item for Hebrew form

    Asked by idanfactor on July 26, 2011 at 03:46 PM

    Hi Guys,


    The matrix is indeed very strong form-item to embbed in the form.

    I want to use it in Hebrew form (right to left language).

    It means it should be mirrored and be displayed right to left. Is it possible?


    I asked similar question about the checkbox and the guys provided me solution to use 

    "float" in specific element in the CSS - it worked fine.

    I would be glad to read your solution.

     

     

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 26, 2011 at 04:21 PM

    Hi,

    Could this be what you had in mind?

    If it is, just inject these custom css codes:

    .form-matrix-column-headers {
        text-alignright;
    }
    .form-matrix-row-headers {
        text-alignright;
    }

     

    I'm thinking though that what you want to do is move the row headers (Service Quality, Overall Hygiene, etc.) to the right. If that is the case, then I am afraid I couldn't find a solution to that, yet. Perhaps my other colleagues can think of way to do so.

    I shall still keep on finding an answer, though. Will let you know.


    Neil

  • Profile Image

    Answered by idanfactor on July 26, 2011 at 04:26 PM

    Not Exactly.

    I need that the gray column in the left of the matrix table above will be the right column.

    This is why I was the verb "Mirror".

    Think about the hebrew users: They will read the table from right to left (not left to right).

     

  • Profile Image
    JotForm Support

    Answered by abajan on July 26, 2011 at 07:19 PM

    Hi idanfactor

    After tinkering around with various CSS rules, this is the best injected CSS solution I could come up with:

    table {
    width:498px;
    position:relative;
    }
    th.form-matrix-row-headers {
    width:147px;
    text-align:right;
    position:absolute;
    left:497px;
    padding:4px 4px 0 1px;
    height:18px;
    }


    One problem is that the results are inconsistent across browsers. Have a look at the following screenshots:

    (Click each image to zoom to actual size)


    Chrome 12:



    Firefox 5:


    IE 8:



    Opera 11:


    Safari 5:


    Another issue is that the values in the above CSS rules will only work for this particular matrix.

    That's pretty much the best I can presently do. Hopefully, someone else comes up with a better solution.


    ~ Wayne

    P.S. Aargh! I forgot to include a direction declaration for the text to go right to left. :(

  • Profile Image

    Answered by idanfactor on July 27, 2011 at 08:25 AM

    Work fantastic...

    (I don't see any significant different in the browsers).

    Thanks Wayne!

  • Profile Image
    JotForm Support

    Answered by abajan on July 27, 2011 at 09:01 AM

    No problem, idanfactor. Glad to help.

    Cheers.


    ~ Wayne

  • Profile Image

    Answered by gabizon437 on July 31, 2011 at 08:06 AM
    Thank u



    I understand that I can do it , but I don’t know what to write in the css place.

    I need the form will be right to left



    This is the form

    http://www.jotform.com/form/12001831188



    and if u can tell me how can I put the title in the box and not above the box



    thank u





  • Profile Image
    JotForm Support

    Answered by abajan on July 31, 2011 at 09:02 PM

    Hi gabizon437

    Thanks for asking. Although yours is actually a compound question and we have a policy of only dealing with one topic per thread, I will make an exception here.

    First of all, click on each field and drag it into the position you wish it to be, with the one for the First and Last Name farthest to the right, Phone to the left of that one, Email to the left of Phone and lastly the submission button should be the farthest on the left.

    Next, label each field (in Hebrew). I know you don't want any labels outside of the text boxes but the injected CSS below will take care of that, while still allowing them to be displayed in the email notifications of submissions you will receive, and in the submissions records of the form.

    Change the error message attached to the email field from English to Hebrew: Load the form into the form builder and while on the Setup & Embed tab, click Preferences > Advanced Settings > Edit Form Warnings > click "Enter a valid e-mail address" and change the text. Do the same for "Please wait...".

    Lastly, injecting the following CSS will, among other things, make text typed in the text boxes go from right to left:

    /* changes text direction */
    .form-all {
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
    }

    /* hides labels */
    .form-label-top {
    visibility:hidden;
    }

    /* vertically re-positions submission button */
    #id_5 {
    padding-top:15px;
    }

    /* constrains IE's error message's width */
    .form-line-error {
    width:203px;
    }

    /* re-positions error message's arrow */
    .form-error-arrow {
    right:10px;
    }

    /* re-positions error message's arrow */
    .form-error-arrow-inner {
    right:-10px;
    }

    I suggest leaving the comments in place to remind you what each rules controls.

    Here is a clone of your form showing the result of the changes described above. All you need to do is replace the image of the submission button with one that has an arrow pointing to the right. (This is necessary because if the current image were to be flipped, its text would be backwords because that text is part of the image.)

    Hopefully, you have found this reply to be helpful. If there is anything else about your form(s) with which you require assistance, please let us know. Our team would be glad to help where we can.

    Thanks.


    ~ Wayne

  • Profile Image

    Answered by gabizon437 on August 01, 2011 at 04:31 AM

    thank u 

    its work very good......

    last question ..... can you give me the same code when the  lable outside the box and not inside 

     

    see this form

    http://www.jotform.com/form/12001458246

     

    thanks again

  • Profile Image

    Answered by brx250 on August 01, 2011 at 05:01 AM

    Hi there,

    Instead of using JotForm's default value, you can use Sub Label instead. Since you do have the right CSS codes already, it should still be aligned RTL.

     

    Hope this helps. If you do have any other question, or issues, feel free to create another thread in our forum.

    Thank you for using JotForm.

    _____________________________________________

    Albert JotForm Support   

  • Profile Image
    JotForm Support

    Answered by abajan on August 01, 2011 at 10:23 AM

    Hi gabizon437

    While my colleague Albert's response is quite adequate, if you really need to show labels instead of sub-labels in that particular form, its current injected CSS will need to be changed to something like the following:

    /* changes text direction */
    .form-all {
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
    }

    /* moves labels to the right of inputs */
    .form-label-left {
    float:right;
    padding-left:10px;
    }

    /* optional: hides pink background on error messages */
    .form-line-error {
    background:none repeat scroll 0 0;
    }

    /* constrains width of error message in IE */
    .form-error-message {
    width:228px;
    }

    /* re-positions arrow on error message */
    .form-error-arrow {
    right:10px;
    }

    /* re-positions arrow on error message */
    .form-error-arrow-inner {
    right:-10px;
    }

    /* re-positions submission button */
    #id_2 {
    padding-right:203px;
    }

    For a good solid understanding of CSS basics, I recommend Maxdesign but there are several handy online CSS tutorials.

    Firebug is very useful in determining which selectors should be targeted. 

    Here is a clone of your form which you may in turn clone and use. In addition to incorporating the above CSS, the notification was redone.

    Should you require assistance with some other aspect of our product, please feel free to post the query on the forum and our team will be glad to help as best as we can.

    Thanks.


    ~ Wayne

  • Profile Image

    Answered by gabizon437 on August 01, 2011 at 12:01 PM

    Thank u very very much

     

    Gili Gabizon

  • Profile Image
    JotForm Support

    Answered by abajan on August 01, 2011 at 12:51 PM

    You're most welcome, Gili :)

    ~ Wayne