'Find Events' Date Popup Broken – possible CSS Index conflict with theme …

[Paul]

Hi,

New to TEC, liking what I see thus far though.

I have an issue with the ‘find events’ box, specifically the Date calendar popup. Selecting the Date field briefly displays the calendar / date chooser popup, before disappearing. Suspiciously, if you then select my theme’s CSS hidden search box, it reappears – so it looks to be some kind of z-index based issue on hidden CSS layers.

Either way, any ideas how I can resolve? You can find my events page here: http://www.roadtovr.com/virtual-reality-events/

..the issue remains regardless of what level of stylesheet integration (skeleton -> full) I choose, so it’s a fairly fundamental conflict.

Thanks in advance.

[Jami]

Hi Paul,

Welcome to our support forum! It’s great to meet you. 🙂

I’ve had a look at your events calendar page and I can see what you mean. I’d like to try to run through some preliminary checks to see if we can narrow down the root cause. Go ahead and first switch to the Twenty Thirteen theme, disable all plugins except Tribe Events plugins, and refresh the events calendar page.  Can you let me know if you’re still having the same issue after doing that?

I look forward to hearing back from you.

Kind Regards,
Jami

[Paul]

Hi Jami,

Thanks for the quick response.

As I say, I’m certain it is the theme which is to blame – I’m just looking for pointers on how to resolve the conflict. Nevertheless, I’ve cloned the live server to a beta site and switched themes, sure enough it no longer occurs.

I appreciate you can’t support every theme out there, however you may be able to spot the conflict.

One note – if you click the date search field (appears and quickly disappears) and then click the search icon on the menu bar, the date field appears. In fact, if you switch between tabs on the browser and then back it re-appears too.

Thanks again and I appreciate the help.

[Jami]

Hi Paul,

I’m not seeing any console errors so it will be difficult for me to pinpoint the exact problem with the theme. Does the same thing happen when you uncheck “Disable the Event Search Bar” in the events settings?

Events > Settings > Display

Kind Regards,
Jami

[Paul]

Hi Jami,

It does indeed – in fact I disabled the bar to try and hunt down the issue.

Indeed no obvious console errors, the only lead is that the menu pops up after clicking the search popout box. Can you tell if the element is switching from display: block; back to ‘none’ when the search bar is used?

Unfortunately this kills TEC for us unless we can find a way through the issue.

[Paul]

Hi Jami,

Do you think there’s any further assistance you can give us on this one – I’ve heard nothing further and we’re pretty stumped.

Thanks!

[Paul]

If we can’t resolve this issue, then could you suggest how we can bypass the jquery / CSS popup menu for something a little more compatible? Either by using basic dropdowns or other methods.

Thanks

[Paul]

OK, I think I’ve worked something out. The issue seems to occur when releasing the mouse button after clicking. If you keep it held, the data picker will continue to display and allow you to select dates. The onClick (or onMouseDown I’m not sure what you’re using) won’t work again until you’ve clicked away / de-focussed from the date picker area – at which point you TEC loads the ‘selected’ value and reloads the main calendar element.

Can someone on the dev team give me an idea whether there’s a way to supress the ‘mouse button up’ event or whether this gives any leads as to my issues here?

Thanks

[Paul]

Sorry, more info. If you ‘mouseDown’ on the datepicker, then hold -> move cursor outside the date picker area -> release, the date picker stays visible and you can select your date.

Again, I’d hope this gives support / developers a pretty good idea where to look. I’d be grateful for some assistance here.

Thanks.

[Jami]

Hey Paul,

I apologize for the delay. Have you been able to get in touch with the author of the Newsmag theme and report the conflict. They will most likely want to fix an issue in their theme if that’s the case.

In the mean time I’m going to check with my colleagues on Monday too to see if they have any suggestions too. 🙂

Kind Regards,
Jami

[Paul]

Thanks Jami, I’ve raised a ticket over at the NewsMag forum – thread can be found here in case you’d like to cross reference:

http://forum.tagdiv.com/topic/newsmag-and-the-events-calendar-css-jquery-conflicts-with-date-picker/

Let me know what you’re colleagues think on Monday.

Thanks

[Jami]

Hi Paul,

I’m having a look again at this but it seems like the issue has been resolved. I’m having a hard time reproducing the original conflict (checking Chrome and Firefox). Were you able to sort out the problem?

I look forward to hearing back from you.

Kind Regards,
Jami

[Paul]

Hi Jami,

The wonderful folks over at TagDiv (NewsMah theme) spotted the issue this morning. Here’s the fix (this will probably affect others, although I’m not sure if it’s a pure bug in TEC):

On click the datepicker div is set to display: none; this causes it to disappears.
Try this custom css in theme’s panel custom css section and test if this still happens. From my test this css code solved this issue: http://screencast.com/t/OUU6bKZJ

.datepicker.dropdown-menu {
display: inline-block !important;
}

This is now implemented on the live site, hence all working.

Thanks for your help.

[Jami]

Sweet! Really glad to hear it got sorted out. Thanks for swinging back by and posting your solution!

Kind Regards,
Jami

[Brook]

This thread is getting archived. If you need anything else please give us a shout in a new thread, we’d love to help.

– Brook

[Author]

Posts