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

    Increase the size of the "Spinner"?

    Asked by dougwoelfle on April 18, 2017 at 02:25 PM

    I want to use the spinner to do inventory....basically only the spinner on an iPhone (or mobile phone) screen.

     

    Can you help me increase the size so it would be very easy to do entries?

     

    Thanks

    Page URL:
    https://form.jotform.us/70916887803165

  • Profile Image
    JotForm Support

    Answered by Kiran on April 18, 2017 at 04:03 PM

    I am not sure if I understand your query correctly. Do you mean to increase the size of the spinner only for mobile devices? 

    Please try injecting the following CSS code to the form to increase the width of the spinner. However, this code would display the increased width of the spinner both on desktop and mobile devices. If you want to display the increased width of the spinner only on mobile devices, you may add this code to the form inside the media query.

    .form-spinner {

      width: 100%;

    }

    #cid_25 div {

    width: 100% !important;

    }

    Thank you! 

  • Profile Image

    Answered by dougwoelfle on April 18, 2017 at 06:44 PM
    How about the height?
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on April 18, 2017 at 11:46 PM

    You can adjust the CSS codes to this

    .form-spinner {

      width: 100%;

    height : 30px !important;

    }

    #cid_25 div {

    width: 100% !important;

    }

    ---

    Example result: 

     

     

    Adjust the px number according to your preference.

    Let us know if you need further assistance.

     

     

     

  • Profile Image

    Answered by dougwoelfle on April 19, 2017 at 10:27 AM

    Thank you!  Very helpful!

    Finally, how do I increase the size of the number, inside the Spinner?  

    This will make it easier to see by the user.

  • Profile Image
    JotForm Support

    Answered by Kiran on April 19, 2017 at 12:18 PM

    Please add the following CSS code to the form to increase the font size of the number inside the spinner.

    #cid_25 {

    width: 70%;

    }

    #input_25 {

    font-size: 70px !important;

    }

    The spinner should be displaying on the form as shown below:

    Thanks!