Datepicker showing behind header, not visible

[Robert]

Hi,

Since you know from other posts, we’re switching from Events Manager, and things are going right. We have now a little issue, which is that the datepicker on Date input field, appears behind the header of our site, and it doesn’t show properly (’cause you can see all dates, and neither year or month). Also, we’ve realized that datepicker always shows upways from date field, is it possible to show upway and downway, depending on page scrolling, like we’ve seen in other js datepcikers?
Thanks for the attention.

[Geoff B.]

Good afternoon Robert and welcome back!

Thank you for reaching out to us.

We are sorry to hear about the date picker being hidden on your install.
I would love to help you with this topic.

With that in mind, I went over to http://provesroro.com/aguasabiertas/ and I am able to see the date picker.
Furthermore, the date picker actually displays under the date field (which it typically does by default).

Could you tell me if you are still experiencing this issue ?

If so, could you tell me what type of device and what browser you are using ?

Best regards,

Geoff B.

[Robert]

Hi Geoff, thanks for your reply.
It doesn’t work properly on http://www.provesroro.com/aguasabiertas/events/ which is the calendar page. In my homepage, where I have a Search Bar, I’ve inserted via a link on thw web from a developer who has made a plugin to do that trick.
So, I don’t really know why in homepage is working, and not in the plugin’s one. I’ve tried two changes,
a) disable this mentioned plugin, nothing changes
b) disable our PRO version of Calendar plugin, and still happens the same
Thanks for helping.

[Geoff B.]

Good afternoon Robert,

Thank you for writing back.

I went on the secondary page and I can see the issue there.
What is happening is that something in your WordPress theme is overriding the built-in CSS rule.

Normally the rule is:

.datepicker.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 20px;
}

But something hardcodes the following value in your datepickers

element.style {
top: -58px;
left: 556px;
z-index: 10;
display: block;
}

The first thing I would recommend is to try the following CSS rules

.datepicker.dropdown-menu {
top: 100% !important;
left: 0 !important;
z-index: 1000 !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[Robert]

Hi Geoff,
You’re right, I don’t know why something is hardcoding the CSS. I’ve tried the solution you post, inside a Custom CSS I’m working on child-theme/tribe-events/pro folder. The datepicker now appears at the left, and far down from the field.
Think we’re in the right direction, but still have some work to achieve it.
Thanks for the effort.

[Geoff B.]

Good afternoon Robert,

I am glad my solution is helping you make progress.
You could also bring those rules straight into your child theme’s style.css file if you prefer.

Is there anything else I can help you with on this topic or you are good to tweak things to your liking ?

Have a good week-end,

Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts