Advanced filters don't hide when they should

[Thomas Dexter]

When I click “hide advanced filters” they don’t actually hide – they just just become full-width pushing the calendar below them. I can’t find any CSS responsible for this or any CSS that would hide the filters. The only CSS that seems to change that has to do with the hide functionality is the addition of the .tribe-filters-closed class to the body which produces this CSS:

.tribe-filters-closed .tribe-events-filters-vertical .tribe-events-filters-content {
padding: 0;
}

I don’t see any ‘display: none’ or similar CSS when I click the ‘hide’ button.

Screencast: https://dl.dropboxusercontent.com/u/13675289/tribe-filters-show-hide-not-working.mov

[Thomas Dexter]

The fix I’m using for now (will remove on next beta update to see if needed still) a simple addition to my stylesheet:

.tribe-filters-closed .tribe-events-filters-content {
display: none;
}

[Leah]

Thanks for the screencast Thomas. Any chance you were able to try this in the Twenty Twelve theme? I’m thinking it might be a theme conflict that’s causing that, and I’m hoping to narrow it down a bit. What theme are you using in the screencast?

~Leah

[Thomas Dexter]

I haven’t found anything yet that is conflicting with the styles. It’s a custom theme no base theme. Can you let me know which HTML element is supposed to be hidden with what CSS? I don’t even see overwritten CSS on the .tribe-events-filters-content in the inspector.

[Kyle]

Hi Thomas!

We’re hiding the elements individually like this:


.tribe-events-filter-view.tribe-filters-closed #tribe_events_filters_form,
.tribe-events-filter-view.tribe-filters-closed .tribe-events-filters-label,
.tribe-events-filter-view.tribe-filters-closed #tribe_events_filters_reset {
display:none;
}


We hide them individually because the horizontal filters are layed out a little differently and hiding .tribe-events-filters-content would hide the horizontal filters’ toggle.

Do you have the .tribe-events-filter-view body class present? Truthfully, we could probably remove the dependency on this body class to toggle the filters, but in its current form, that missing body class could be the culprit.

Also, are you getting any console errors? I see in the tribe bar Views dropdown that you have some doubling going on with a select2 element and our standard views select. Wondering if any JS is getting jammed somewhere.
Are you running 3.0.3 of TEC and 3.0.5 of TEC Pro? Select2 was completely removed from the front-end as of 3.0.3.

Cheers,
Kyle

[Thomas Dexter]

Hi Kyle:

I’ve fixed the select2 issue, but it’s still doing the same thing when clicking show/hide advanced filters. There are no js errors anymore. I do not have that body class – where is it supposed to come from? Does TEC add it in somewhere or am I supposed to add it to my theme?

Thanks,
Thomas

[Kyle]

Hi Thomas,

The class is added in lib/tribe-filter-view.class.php using the body_class filter. Tell me, in your theme’s header.php does you tag have inside of it? This is required for classes added through body_class to be applied.

Cheers,
Kyle

[Thomas Dexter]

Thanks Kyle – theme was missing body_class(). It’s working now as intended.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts