How to adjust the margins of the scale rating

  • VJinfo
    Asked on 21. lokakuuta 2024 klo 8.19

    Hei,

    Haluaisin tehdä lomakkeeseen NPS laskennan. Numerot menevät hassusti, koska yksi numero jää eri riville. Saako nämä kaikki samalle riville?


    Liitteenä kuva

  • Lorevie Jotform Support
    Replied on 21. lokakuuta 2024 klo 10.29

    Hi VJinfo,

    Thanks for reaching out to Jotform Support. While we do offer Support in many foreign languages, and we're working hard to add more every day, we don't currently have Finnish Support agents who can help you. So I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using.

    Now, coming back to your question, Unfortunately, I couldn't see the screenshot you shared on my end. Can you try to send it again? Let me show you how to post a screenshot to our support forum:

    1. On the Support Forum page, scroll down to the Your Answer section and click on the Image icon.

    2. Drag and drop your image into the Upload box, or click on it and select your file.

    3. Then, click on the Add button in the bottom-right corner of the window.

    How to adjust the margins of the scale rating Image 1 Screenshot 30

    4. To resize it, click on your screenshot and then click on one of the boxes in the corners, and drag it inward.

    5. Once you're finished, click on the Post Answer button at the bottom right of the Your Answer section.

    How to adjust the margins of the scale rating Image 2 Screenshot 41 Can you also send us the affected form URL? Let me show you where to find this:

    1. In Form Builder, click on Publish on the orange navigation bar at the top of the page.
    2. Select Quick Share from the left side window.
    3. From Share With Link, click on the Copy Link button and share it on this thread.Approvals: Were getting an Error on the approval status Image 1 Screenshot 20 Screenshot 52

    After we hear back from you, we'll be able to help you with this.

  • VJinfo
    Replied on 22. lokakuuta 2024 klo 1.15

    How to adjust the margins of the scale rating Image 1 Screenshot 20

    So here is the picture. I have this NPS question there, but it is kind a silly because the last digit 10 is on another row. Can you fix it?

    https://eu.jotform.com/myforms/


    Form is the first one "palautekysely"

  • Richie Jotform Support
    Replied on 22. lokakuuta 2024 klo 5.31

    Hi VJinfo,

    You can add this custom CSS into the form to adjust the margin of the scale.

    #cid_11 .rating-item:not(:last-child) {
      margin-right: 20px;
    }

    Let me show how to add it to your form:

    1. In Form Builder, click on the Paint Roller icon on the right corner of the screen.
    2. Go to the Styles tab and scroll down.
    3. Paste the CSS code into the Inject Custom CSS field.
      How to adjust the margins of the scale rating Image 1 Screenshot 30

    Check out this sample screenshot of my output:

    How to adjust the margins of the scale rating Image 2 Screenshot 41

    Give it a try and let us know if this works for you.

  • VJinfo
    Replied on 22. lokakuuta 2024 klo 5.44

    It didn't work. Should I remove all the text from css box?

    But I made the form video from 752 to 780 so now when you open it via laptop/computer it is okay, but mobile version is still in two rows. Perhaps that is impossible to fix it?

    How to adjust the margins of the scale rating Image 1 Screenshot 20

  • Richie Jotform Support
    Replied on 22. lokakuuta 2024 klo 6.18

    Hi VJinfo,

    The work around I shared should work on computer or laptop view. We can shrink the scales on the mobile view but it would not look great as there is not enough space for each scales. The work around would be to reduce also the scale size to fit it the spaces. You can check out this screenshot of my sample output:

    How to adjust the margins of the scale rating Image 1 Screenshot 20

    If you want this look on mobile, then you can add this CSS code into your form.

    @media screen and (max-width: 480px){

    .rating-item > label {
      display: -ms-flexbox;
      display: flex;
      width: 22px;
      height: 24px;
      }

    #cid_11 .rating-item:not(:last-child) {
      margin-right: -16px;
    }
    }

    You can also check out my cloned form to test it out.

    Let us know if there’s anything else we can help you with.


  • VJinfo
    Replied on 25. lokakuuta 2024 klo 5.44

    Your test form looks great! I didn't get it right so could you add that to my form?


    Thank you for help!

  • Adrian Besilla Jotform Support
    Replied on 25. lokakuuta 2024 klo 8.43

    Hi VJinfo,

    You can have a copy of the form created by my colleague if it meets what you're trying to do with your form. You can follow the steps below on how you can clone the form:

    1. Go to your My Forms and click on Create Form in the upper-left corner of the page.

    Trying to clone form from other account Screenshot 72 Screenshot 20

    2. From the options under Create a Form, choose Import Form.

    Trying to clone form from other account Screenshot 83 Screenshot 313. Now, select From a web page from the menu under Import Form.

    4. Paste the form’s address in the Enter URL field.

    5. Finally, click on Create Form at the bottom.

    Trying to clone form from other account Screenshot 94 Screenshot 42You will be redirected to Form Builder afterward, where you can start working on your newly cloned form.

    Additionally, you can add the custom CSS provided by my colleague into your form to adjust the margin of the scale.

    1. First, copy the CSS code from my colleague's test form:
    2. Then, open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.
    3. Under the Styles tab, scroll down and paste the code into the Inject CSS Code box.
    4. Click on Save at the bottom of the Form Designer menu, and you’re done.

    How to adjust the margins of the scale rating Image 1 Screenshot 53 Give it a try and let us know how it goes.

  • VJinfo
    Replied on 28. lokakuuta 2024 klo 2.31

    Thank you for your help!
    I got it right by cloning the form :)