Make Spinner larger - or alternative?

  • Profile Image
    behedwin
    Asked on June 16, 2015 at 05:49 AM

    I want to use a small form on a tablet.

    But when i use the tool "spinner" it is very small.

    Are there any alternatives to the spinner?

  • Profile Image
    Boris
    Answered on June 16, 2015 at 09:09 AM

    Hello.

    You can make the spinner larger by using custom CSS, or by using a theme where it is already styled to be larger. Are you wanting to make it larger only on mobile devices / smaller screens?

    You may want to try using our default Mobile theme:

    If you do no wish to use the Mobile theme, please let us know the link to your form, and we will be happy to take a look and provide a CSS solution that will enlarge your spinner field. Thank you.

  • Profile Image
    behedwin
    Answered on June 16, 2015 at 02:24 PM

    Yes i want to make the spinner larger and easier to use with your finger on a mobile device (small screen).

     

    http://form.jotformeu.com/form/51665162087357

     

    I tried a bunch of themes, thanks for showing me those.

    But none of them seem to change the size of the spinner.

    So how do i change it´s size or design so it is more friendly to use with your finger on a small screen.

  • Profile Image
    Syed
    Answered on June 16, 2015 at 02:46 PM

    Hi there;

                Could you try to inject the following CSS Code Block to make Spinner Fields larger, read this guide on How you can Inject Custom CSS Codes. Review the following screenshot for confirmation.

    .form-spinner-up, .form-spinner-down {height: 23px !important; width: 23px !important;}

    .form-spinner-up img, .form-spinner-down img {display: none !important; }

    .form-spinner-up {background: url('https://cms.jotform.com/uploads/image_upload/image_upload/Syed/33618_up_arrow_spinner.png') no-repeat !important;}

    .form-spinner-down {background: url('https://cms.jotform.com/uploads/image_upload/image_upload/Syed/33619_down_arrow_spinner.png') no-repeat !important;}

    #input_48 {border: 1px solid #000 !important;}

    Here is the form link, you can clone it, anytime; http://form.jotformpro.com/form/51665245283963. Read this guide on How you can Clone this form from URL.

    Hope this helps. Please let us know, if you need further assistance, we would be happy to help you in any regards.

     

    Thankyou,

  • Profile Image
    behedwin
    Answered on June 16, 2015 at 02:59 PM

    That worked to make it larger.

    Thanks for your help

     

    Now to make it pretty :)

  • Profile Image
    Syed
    Answered on June 16, 2015 at 03:03 PM

    You're welcome, do get back to us, if you need further assistance in any regards. We would be happy to help you :)

     

    Thankyou,