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

    Any way to make the calendar icon larger?

    Asked by mcwatson on December 19, 2014 at 09:32 AM

    Hi,

    I regularly use the calendar option in my forms but the users often say the little calendar icon that you tap is too small and would like it a bit larger.

    I looked in the options but couldn't find anything there, wondered if there is any way of achieving this or maybe injecting some code to enlarge it.

    Kind regards,

    Mark.

    icon calendar icon My Forms find
  • Profile Image

    Answered by raul on December 19, 2014 at 12:06 PM

    Yes, this is possible by injecting custom CSS in your form. Please try to inject the following code to your form:

    .showAutoCalendar {
         width: 150%;
    }

    You can modify the percentage value (in bold) to the value of your preference. You can also see a demo form here: http://form.jotformpro.com/form/43525212332948

    Feel free to clone it to your account if you want to.
    Thanks.

  • Profile Image

    Answered by mcwatson on December 19, 2014 at 12:31 PM

    Hi,

    Thanks for your reply. I applied that code and it works, icon appears bigger and can be adjusted accordingly.

    But it only seems to work when viewing the form on a normal screen, it doesn't seem to transfer when viewing it on a mobile. Would the Mobile Responsive Widget over rule the code and retain the standard icon size?

    Thanks,

  • Profile Image

    Answered by raul on December 19, 2014 at 12:53 PM

    I assume this is the form you're referring to: http://www.jotformpro.com/form/42963169828974 is that correct?

    Please try to use this code instead:

    .showAutoCalendar {
         width: 300% !important;
    }

    I just added the !important command to the CSS rule, because as you said the widget is overruling the custom width value, but with this command you can prevent that.

    Let us know if it works.
    Thanks.

  • Profile Image

    Answered by mcwatson on December 19, 2014 at 12:59 PM

    Excellent!!!

    That worked and is exactly what I wanted. Of course, the icon looks a little more blurry the bigger the percentage but that's true of any graphic that is enlarged.

    Thank you very much for your help and keep up the good work.

     

  • Profile Image

    Answered by raul on December 19, 2014 at 01:18 PM

    You're welcome and thank you for your kind words.
    Glad it worked out the way you wanted.

    Feel free to open a new thread if you require further assistance.
    Best Regards.