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

    Positioning the star rating label and icon size

    Asked by beckerfurniture on May 04, 2016 at 09:09 AM

    Hello,

    I am using the Star Rating survey field. I am looking to achieve two things:

    1. Keep the label text top aligned but centered and the star images centered as well.

    2. Increase the size of the stars.

     

    I did see several threads regarding the star size, without much for answers.

     

    Are either possible? 

     

    Page URL:
    https://www.jotform.com//?formID=61234516652149#

    size label star rating icon
  • Profile Image

    Answered by victor on May 04, 2016 at 10:44 AM

    To center the text and rating star in your page, you may inject the following CSS code:

    #id_3 {

        text-align : center !important;

    }

    I tried to resize the image of the stars, unfortunately it is directly linked to:

    https://cdn.jotfor.ms/images/stars2.png

    Even when using CSS code, I was not able to change the image size.

    Sorry for the inconvenience.

  • Profile Image

    Answered by beckerfurniture on May 04, 2016 at 10:49 AM

    Thank you for the CSS, this aligned the stars, but the text still seems left aligned.

    https://www.jotform.com//?formID=61234516652149#

     

    I would highly suggest some sizing options on the rating images as I have seen others want this capability.

  • Profile Image
    JotForm Support

    Answered by Charlie on May 04, 2016 at 12:01 PM

    I have copied my colleague's CSS code and updated it. Here's the finalize one:

    #id_3, #label_3 {

        text-align : center !important;

    }

    Replace your current CSS code with that one.

    Here's my cloned form: https://form.jotform.com/61244524591959.This is how it looks like:

    Let us know if that works.