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

    How can I move the Hover Box?

    Asked by talderman on October 13, 2016 at 08:49 AM

    I am making a customer survey and have added a hover box for explanation. The questions is a matrix and when previewing it, the hover box covers up the last column making it so some options can't be chosen. How do I relocate the hover box?

     

    Please respond to dhudson@gostylie.com

    Page URL:
    https://form.jotform.com/62854228431961

    Screenshot
    survey Previewing
  • Profile Image
    JotForm Support

    Answered by olivia on October 13, 2016 at 10:56 AM

    Please inject following css codes to your form.

       .form-description {

            margin-right : -100px;

        }

    Please follow the guide about How to Inject Custom CSS Codes. 

    It will be seen as below after adding this code.

     

    If you need any other support by our side, please let us know. 

  • Profile Image

    Answered by talderman on October 13, 2016 at 11:19 AM

    Thank you so much! That worked. How do I move it down a little now?

  • Profile Image
    JotForm Support

    Answered by olivia on October 13, 2016 at 11:36 AM

    You're welcome.

    To move your hover box down a little, please, inject the css codes to your form. As you can see below, I just added margin-top:30px;  css code to existing css.

        .form-description {

            margin-right : -100px;

            margin-top : 30px;

        }

     

    If you have any questions, feel free to let me know.

  • Profile Image

    Answered by talderman on October 14, 2016 at 09:49 AM

    When looking at the survey in preview or after published, it shows the code for spaces and breaks. It doesn't have those when simply editing it. 

     

    Also, can I make certain words in the hover message bold? What I am trying to achieve is an explanation of the terms used in the first column of question. So in the hover message I want to bold each of the terms before i give the explanation. So for the first one it would be

     

    Photo Manager- Photos of previous work for your clients to see

  • Profile Image
    JotForm Support

    Answered by Boris on October 14, 2016 at 11:02 AM

    I'm afraid I'm not sure what you meant by this:

    When looking at the survey in preview or after published, it shows the code for spaces and breaks. It doesn't have those when simply editing it.

    Is the form displaying incorrectly for you somewhere? If so, could you please attach a screenshot of the issue, so we can assist you properly.

    When it comes to the Hover Boxes, they accept plain text entries only, and cannot be used with rich / formatted text.

  • Profile Image

    Answered by talderman on October 14, 2016 at 11:11 AM

    Okay actually you can scratch that. I decided not to go with the hover message. However, for the same question when viewing it in the mobile version it expands the first column, making the other columns very small. When flipping the phone landscape, the problem is fixed. Is there a way of formatting it so when in portrait view it looks normal.

  • Profile Image
    JotForm Support

    Answered by Boris on October 14, 2016 at 11:38 AM

    The styling issue of the Matrix field is being caused by the mobile responsive styles present on the form. To fix it, we can simply include the following custom CSS in your form:

    @media only screen and (max-width:40em) {
        .form-matrix-row-headers {
            width:auto;
        }
    }

    You can inject CSS into your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    In case the above code doesn't work for some reason, we can increase specificity of the code by using this instead:

    @media only screen and (max-width:40em) {
        .form-matrix-row-headers {
            width: auto !important;
        }
    }

    However, the first code would be preferable. Please try it out, and let us know how it goes.