Scale rating on mobile view

  • Profile Image
    JJLeGrange
    Asked on February 10, 2021 at 08:24 AM

    Good day,

    What is the correct mobile format / CSS code for the scale rating feature? I would like the scale rating feature to fit the screen on mobile.

    Here is the link to the form: https://www.jotform.com/build/210391173520041.


    Thanks.


  • Profile Image
    Sam_G
    Answered on February 10, 2021 at 09:16 AM

    Hi JJlegrange,

    I have checked your form and it fits perfectly on a mobile view.

    1612966546_6023ea92addf3_

    I tried it on mobiletest.me and it looks great as well.

    1612966595_6023eac3d4b52_

    Kindly check and let us know if the issue persists.

  • Profile Image
    JJLeGrange
    Answered on February 11, 2021 at 04:29 AM

    Hi, I need the numbers from 0 - 10 to be on the same line. Is that possible? Thanks for the feedback.

  • Profile Image
    Vick_W
    Answered on February 11, 2021 at 04:44 AM

    Hi there,

    Please try injecting the following CSS in your form.

    .rating-item-group, li[data-type=control_scale] .form-sub-label-container {
        display: flex;
        flex-wrap: nowrap;
        width: 54% !important;
    }
    @media screen and (max-width: 600px){
    .rating-item, .rating-item>label {
        display: flex;
        width: 1.33333em;
    }}

    Related Guide:

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

    Let us know if you need further assistance.

    Thanks

  • Profile Image
    JJLeGrange
    Answered on February 11, 2021 at 06:15 AM

    1613042126_602511cea031e_WhatsApp Image


    Thanks, is there a reason why it looks squashed?



  • Profile Image
    jonathan
    Answered on February 11, 2021 at 06:37 AM

    We apologize for inconvenience. I was able to see the issue as well when check/test using mobile browser.

    1613043449_602516f92f072_zzz 2021-02-11

    The custom injected CSS codes needs to be updated. Allow me some more time to check. I will get back to this shortly.

  • Profile Image
    JJLeGrange
    Answered on February 12, 2021 at 07:59 AM

    Hi,

    I'm still waiting for feedback?

    Regards,

  • Profile Image
    Jovanne_A
    Answered on February 12, 2021 at 08:20 AM

    Hi,

    Let me contact my colleague for an update. We will get back to you as soon as we have more information.

    Thank you.

  • Profile Image
    JJLeGrange
    Answered on February 15, 2021 at 08:12 AM

    Hi,


    Do you have an answer? I need it to be done asap please.


  • Profile Image
    Sigit_W
    Answered on February 15, 2021 at 08:55 AM

    Greetings,

    Kindly inject the following CSS code in your Form Design

    .rating-item-group, li[data-type=control_scale] .form-sub-label-container {
        display: flex;
        flex-wrap: nowrap;
        width: 54% !important;
    }
    @media screen and (max-width: 600px){
    .rating-item, .rating-item>label {
        display: flex;
        width: 1.33333em;
        height:1.33333em;
        transform : scale(1,1) !important;

    }

    You can change the width and height according to your needs.

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

    Let us know if you need further assistance.

    Thank you. Regards.

  • Profile Image
    JJLeGrange
    Answered on February 15, 2021 at 09:43 AM

    1613400143_602a884f185b3_WhatsApp Image

    Hi, thanks. That's a screenshot from my mobile, I need the scale to fit the whole screen without it looking squashed.


  • Profile Image
    ashwin_d
    Answered on February 15, 2021 at 10:46 AM

    Which mobile device you are using, and what is the screen size? I did check your form in the mobile device, and it seems to display the fields correctly.

    I would suggest you to please update the injected CSS code with the following custom CSS code and see if it displays the field correctly:

    @media screen and (max-width: 600px)

    .rating-item, .rating-item>label {

      display: flex;

      width: 1.33333em;

      height: 1.33333em;

      transform: scale(1,1) !important;

      margin-right: 4px !important;

    }

    Do get back to us if the issue persists.

    We will wait for your response.

  • Profile Image
    JJLeGrange
    Answered on February 16, 2021 at 02:17 AM

    1613459781_602b7145408ed_WhatsApp Image


    Hi, I'm using a Samsung A51. Tested it on an iPhone XR and it displays the same way.

  • Profile Image
    JJLeGrange
    Answered on February 16, 2021 at 02:19 AM

    1613459956_602b71f4ae0eb_WhatsApp Image


    It needs to look like in the image above, it must just not look squashed.

  • Profile Image
    Vick_W
    Answered on February 16, 2021 at 03:36 AM

    Hi there,

    The code provided by my colleague required a minor fix. Please check the form on your mobile device now and let us know if you need further assistance.

    Thanks

  • Profile Image
    JJLeGrange
    Answered on February 16, 2021 at 05:32 AM

    Hi,


    It's fine, thanks.