Calendar Does not Open on Datepicker

Hello @rene-michaels

I hope you’re well today!

This is happening due to how the popup (in which the form is located) works – it affects popup position calculation.

It can be fixed with a bit of additional CSS. The basic way would be to add CSS like this

#ui-datepicker-div {
top:250px!important;
}

to site’s custom CSS (e.g. via theme’s custom CSS option or via a plugin such as Simple Custom CSS or similar).

Note though:

1. you may need to adjust 250px value to better position calendar

2. since position would be different on desktop and various mobile devices, you may use CSS media queries to address this:

https://www.w3schools.com/css/css3_mediaqueries.asp

3. once CSS is added, you may also need to fully purge all cache on site/server (if there is any) and in browser.

Kind regards,
Adam

The code you supplied (below) worked on mobile but nowhere else

#ui-datepicker-div {
top:250px!important;
}

So I tried media queries, but I’m guessing at the “top” height and none of these worked including mobile

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	#ui-datepicker-div {
top:250px!important;
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	#ui-datepicker-div {
top:550px!important;
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
	#ui-datepicker-div {
top:850px!important;
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	#ui-datepicker-div {
top:1200px!important;
}

Hi @rene-michaels

Hope this message finds you well.

Since you are adding different heights according to the @media, the rules is not consistent, I would suggest checking the theme and using the same rules for it.

For example, there is no rule between 480px and 768px.

Let us know the results after adjusting the rules.

Best regards,
Laura

Below is a revision with my theme breakpoints, but I’m having difficulty determining what the “top:250 !important!” should be for each width?

@media only screen and (max-width: 320px) {
#ui-datepicker-div {
top:250px!important;
}

@media only screen and (max-width: 480px) {
#ui-datepicker-div {
top:350px!important;
}

@media only screen and (max-width: 767px) {
#ui-datepicker-div {
top:450px!important;
}

@media only screen and (max-width: 1080px) {
#ui-datepicker-div {
top:550px!important;
}

@media only screen and (max-width: 1280px) {
#ui-datepicker-div {
top:650px!important;
}

Any suggestions?

Disregard the above. This needs to work on any size screen in any orientation. With that, I created a link to a page with the form instead of using a modal which is a workaround for now.