The user would like to indicate labels for each of the Scale Rating options

Hey guys,

I previously asked for some CSS to fill in values for the middle values on the scale rating widget. It worked for a little bit, but now is misaligned.

Could you guys please help me adjust the CSS so the "Several Days" and "More than half the days" align properly with options 1 and 2, and also make them the same color as the other options?

The form currently looks like this using the original CSS code:

This is what the CSS code I was given and is currently on the form is:

.rating-item-title.for-from::after {

  content: "Several Days" !important;

  padding-left: 30px;

}

.rating-item-title.for-to:before{

  content: "More than half the days" !important;

margin-left: -120px !important;

  padding-right: 10px;

}

.rating-item:not(:last-child) {

  margin-right: 45px !important;

}

.rating-item-title .for-to{

  margin-left: -50px;

}

.form-label.form-label-auto {

    display: inline-block;

    float: left;

    text-align: left;

   }

This is the link to our form so you can see the issue:

https://hipaa.jotform.com/203151017790043

Thank you for the help!

Thank you for reaching support,

Just to clarify, the option labels  "Several Days" and "More than half the days" are supposed to be assigned to option 1 and 2?

If so, then I have attempted to make customization but to no avail due to the limitations of the widget.

You may use Dropdown or a Single choice field instead.

Let us know if you have any further questions.

Best.

Yes that was the goal.

Also what do you mean?

The CSS given was working up until now, it seems like it just needs some tweaks. I don't get how it can suddenly shift a little bit, and that means its now impossible to fix.

It works for number 2, so I don't understand how it's suddenly impossible to achieve with CSS.

Hi there,

Yes, as for number 2, but as a workaround and not a fitting solution, I will be making a feature request for this to our developers but I cannot guarantee an ETA of when this will developed and implemented.

If there are any updates our developers will be responding on this support ticket.

Thank you for your patience.

Best.

I don't understand how it WAS possible, CSS WAS made for it that worked, I added the name field, and suddenly it becomes impossible to achieve with CSS.

Once again, the CSS was given by a Jotform Developer and functional for 2-3 weeks.

Please check the screenshot below and see if this is what you want to achieve:

I cloned your form, removed few custom CSS code and injected targeted custom CSS code to display the labels for option 1 & 2: https://form.jotform.com/203380679166967

Feel free to clone this form for a closer look at the injected custom CSS code. The following guide should help you in form cloning: https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

Do get back to us if you want use to just share the custom CSS code, and we will do the needful.

We will wait for your response.

THANK YOU. This was literally all I needed. Thank you!

Is there a way I can get this to extend to the second page? The options show up exactly as you said, but only on the first page.

Thank you again!

I missed the fields of the second page. I will work on the custom CSS code and will get back to you on this soon.

Please take a look at the following cloned form where I have injected custom CSS code to target the fields of the second page as well: https://form.jotform.com/203380679166967

Hope this helps.

Do get back to us if you need any other changes.

This is working perfectly and exactly what I needed, thank you so much Ashwin!!

Hello Ashwin,

We would like the scale to read:

0 - Not at all

1 - A little bit

2 - Moderately

3 - Quite a bit

4- Extremely

https://hipaa.jotform.com/203457782388064

Would it also be possible to fix the "extremely" from spilling one letter over to the next line?

Thank you so much for your help!

Hi there,

I have moved your other concern on this support ticket: https://www.jotform.com/answers/2762475-Would-you-also-be-able-to-help-me-with-custom-CSS-for-the-following-form-as-well

I will respond to it shortly.

Best.