Filter Bar click area issue

[Sean]

Hi,

I reached out to the folks at Theme Fusion regarding this issue I’m experiencing with TEC and their theme, Avada. After investigating, they recommended I contact you guys for assistance.

The issue is that when the Filter Bar is closed, the clickable area to “open” the Filter Bar covers the Tribe Events Bar. So, clicking anywhere on the Tribe Events Bar makes the Filter Bar expand to show the filters. When the Filter Bar is open, there is no issue. The clickable area extending to the top/right of the “Show Filters” text only occurs when the Filter Bar is closed.

A screenshot showing the extended “clickable” area for “Show Filters” is provided in the System Information.

Thank you for any assistance!

[Sean]

PS – This custom CSS was added previously added to resolve an issue with the Filter Bar having blank space next to it and the calendar view displaying below the Filter Bar.

#tribe-events-content {clear: none !important;
}

[Brook]

Howdy Karly,

I bet I can help with this. Haven’t seen this before but I think the fix will be simple. Could you try adding this to one of your CSS files:

body .tribe_events_filters_show_filters {
height: 16px;
width: auto;
}

I think that will fix it. It has in my testing.

Cheers!

– Brook

[Sean]

Good morning Brook,

Thanks! That seems to have fixed the issue on desktops.

However, I just noticed on mobile devices the Filter Bar appears as a box on top of the Tribe Events Bar (no text, just a gray box). The “Show Filters” text appears on top of the “Upcoming Events” header. Very weird! Any suggestions on what css might fix that?

Thanks again,
Karly

[Brook]

Howdy Karly,

It looks like you might also need to add the following to that CSS rule:

 margin: 0;
line-height: 16px;

I think that will work. It might have further side-effects though. 🙁 It looks like Avada might not support the Filter Bar.

That work?

• Brook

[Sean]

Hi Brook,

Bummer; that didn’t seem to have any effect on the placement of the “Show Filters” text or block on mobile devices.

Totally understand that its not on you guys for Avada not being compatible with the Filter Bar; I’ll reach out to Theme Fusion to alert them to it. Even though they tout it as being compatible with TEC & PRO, for those of us that use the Filter Bar its a problem. So hoping they’ll make it compatible “out of the box” soon.

In the meantime, are there any other elements we should try targeting to resolve this layout of the “Show Filters” on mobile devices? When the Filter Bar is opened on mobile, everything appears correctly.

Thanks again.

[Brook]

Hmm, it looks like the CSS rule itself might not be specific enough. This rule is overriding it:

.tribe-events-filter-view.tribe-filters-closed #tribe_events_filters_wrapper #tribe_events_filters_toggle{...}

We would need something even more specific than that to override its settings. I tried this and it was working for me:

body #tribe_events_filters_wrapper #tribe_events_filters_toggle.tribe_events_filters_show_filters{...}

It’s definitely a good idea to reach out to them. Filter Bar is one of our most popular addons. I am not sure if they don’t support it, or if they just haven’t noticed the bug yet. Our plugin strategist was working with them helping them however they needed to make Avada compatible. He might know if they officially planned to support Filter Bar or not. I will check in with him.

Cheers!

– Brook

[Sean]

Thank you very much Brook. I tried that revised rule and it is working good. Just need to see if I can get it (the “Show Filters”) to display in the same location (below the Tribe Events Bar) that the “Collapse Filters” does.

I’ll definitely reach out to Theme Fusion to make aware of these incompatibilities.

Thanks for your help!

[Sean]

Brook,

I made some changes to the prior rule to get the Show Filters box and text displaying as desired:

body #tribe_events_filters_wrapper #tribe_events_filters_toggle.tribe_events_filters_show_filters {
height: auto;
width: auto;
margin-top: -20px;
line-height: 30px;
}

However, when “Show Filters” is clicked on mobile devices, the first few filters (Event Categories, etc) are being hidden by the Avada menu/navigation.

So, I tried the following:

.tribe-events-filters-vertical #tribe_events_filters_form {
    margin-top: 80px;
}

That fixed the issue on mobile, but unfortunately it causes desktop view to have blank space between “Narrow Your Results” and the “Event Categories” filter. Do you know how I can have this rule only apply to the smaller mobile screens? Or is there another element that I should be targeting?

Thanks again,
Karly

• This reply was modified 10 years, 6 months ago by Sean. Reason: Removed "position: relative;" from last rule

[Brook]

That’s awesome! Thanks for recapping too, that code you shared will be useful for future users.

You can apply CSS strictly to small screens by writing even more custom CSS, heh. Checkout CSS Media Queries. These allow you to target a device based on its screen size. In your case it looks like the site changes to the mobile Filter Bar at 768px, so this rule will allow you to do apply CSS only to screen under 768px.

@media (max-width: 768px) {
.tribe-events-filters-vertical #tribe_events_filters_form {
margin-top: 80px;
}
}

• Brook

[Sean]

Perfect! I’m not too familiar with media queries (other than knowing the term), so this saved me some time!

Have a great weekend,
Karly

[Brook]

Excellent! Happy to assist. Thanks for marking this resolved.

– Brook

[Author]

Posts