-
MaidCrewAsked on November 27, 2016 at 9:53 AM
Hi... I'm wondering if there's CSS for increasing the size of the pop-up Calendar for the DateTime picker while using Lite-Mode?
When using on a smart-phone / mobile, the calendar is a little small for being able to tap the preferred date.
I'd say it should render at about 50% larger than it does currently.
Is that possible?
Thanks.
Page URL: https://form.jotform.com/61794097469170 -
Nik_CReplied on November 27, 2016 at 10:44 AM
Yes there is, to increase please paste the below CSS in your Custom CSS field:
.calendar.popup {
width:250px;
height200px;
}
.calendar table {
width:250px;
height200px;
}
You can adjust width and height as you wish, just make sure that they are the same for table and for popup class.
If you have any further questions please let us know.
Thank you!
-
MaidCrewReplied on November 27, 2016 at 11:22 AM
Thanks for the rapid response! Greatly appreciated.
One last question on the calendar adjustment(s)....
How would I then change the text size? I tried adding/applying font-size attribute into the prev css you provided but that didn't work. I'm looking to enlarge both the month/year title bar as well as the day of the week row and each of the dates.
Thanks again, y'alls assistance is a HUGE help!
-
MaidCrewReplied on November 27, 2016 at 11:34 AM
Also... just discovered, making the CSS adjustment causes a shadowed box / ghost box to remain behind. In trying this on other forms, I've found that the ghost box also blocks any underlying input fields. Any way to remove that?
-
David JotForm Support ManagerReplied on November 27, 2016 at 1:16 PM
If you want to increase the font size of the calendar, inject the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
div.calendar td, div.calendar th {
font-size: 20px;
}
Result:
Could you please share a screenshot of the shadowed box you are referring to? https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum
Also, indicate the form you are referring to, we will be glad to assist you.
-
MaidCrewReplied on November 27, 2016 at 2:09 PM
Thanks for help with the code. As for the ghost / shadow box, I should clarify.
In my DateTime Options settings, I have Calendar Pop-Up toggled to "ON" in order to "Display a date picker when interacting with the field".
If you click the tiny calendar icon, the calendar-popup renders and disappears properly as your test revealed.
If you click into the actual input field as if you were going to type in the date, the calendar pops up BUT then once you've selected a date, the form is left with a shadowed, transparent (ghost) box that layers over all other inputs.... preventing interaction with subsequent questions / fiil-ins.
And before I forget ... ALSO
Since I selected to have the Date Picker show when interacting with the field (and by doing so, user can tap a date to select) is there a way to prevent the keyboard on a mobile phone from activating when someone interacts with the date-field? If a calendar / date picker pops up when interacting with the input field, it is bothersome and redundant to have to deal with the keyboard on the mobile phone screen. -
David JotForm Support ManagerReplied on November 27, 2016 at 4:09 PM
Remove the following injected code from your form: https://form.jotform.com/61794097469170
.calendar.popup {
width:250px;
height:200px;
}
You can test my cloned version: https://form.jotform.com/63316269298971
Your inquiry regarding the mobile view will be addressed on the following thread: https://www.jotform.com/answers/998461
-
MaidCrewReplied on November 27, 2016 at 4:26 PM
Thanks Much BDavid! I'm grateful for all your help today.
-
David JotForm Support ManagerReplied on November 27, 2016 at 4:40 PM
Welcome! Open a new thread if you need anything else. :-)