Any way to make the calendar icon larger?

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.

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.

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,

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.

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.

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.