How to adjust the margins of the scale rating

Hei,

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

Liitteenä kuva

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.

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.

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.

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

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"

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.
   

Check out this sample screenshot of my output:

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

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?

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:

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.

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

Thank you for help!

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.

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

3. 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.

You 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.

Give it a try and let us know how it goes.

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