Filter Bar Responsive Breakpoint

[Sean]

Hi,

The Events Calendar’s responsive breakpoint kicks in “not just if the screen is less than 768 pixels, but the container holding the calendar as well. If the calendar is sitting in a container that is less than 768 pixels, then it will respond to that breakpoint.”

However, the Filter Bar’s responsive breakpoint (also 768 pixels), only kicks in based on the screen size. This can cause the calendar to appear too small on sites that have a sidebar, where the container of the calendar is much narrower due to the Filter Bar continuing to display its large layout even though its container is now under 768 pixels.

How can we set the Filter Bar’s responsive breakpoint to kick in not only when the screen size reaches the calendar’s breakpoint, but also when the size of the container holding the calendar reaches that breakpoint?

Thanks and Happy New Year!

[Geoff B.]

Good evening Karly and happy new year to you too!

Thank you for your question on customizing the Filter Bar’s responsive breakpoint.

The great news is that you actually have 2 options to accomplish what you are looking for:

1. Through CSS (either by adding rules or using the skeleton template and starting from scratch)
2. Through the functions.php of your WordPress template

Your starting point should be to read our Themer’s guide. Especially the following sections:

• Customizing Styles
• Responsive Templates

Lastly, the CSS rules for the Filter Bar are located in /the-events-calendar-filterbar/src/resources/css/filter-view.min.css (you can do a query with the “@media” string).

Let me know if that helps you out and do not hesitate if you have any other question.

Happy customizing!

Geoff B.

[Sean]

Hi Geoff,

Thanks for the info. I had previously read over those docs so I was hoping to hear there was a filter to quickly modify the Filter Bar’s breakpoint. Can you confirm if such a filter exists?

Also, it appears that the events bar breakpoint is set by Javascript: it calculates the container width and then adds a CSS class. Can you offer some guidance on how we could “copy” that and apply it for use in setting the Filter Bar’s breakpoint to also change based on the calendar’s container width? Or better yet, can you check with your developers to confirm what the best way to accomplish this is? The goal is to: set the Filter Bar’s responsive breakpoint to kick in not only when the screen size reaches the calendar’s breakpoint, but also when the size of the container holding the calendar reaches that same breakpoint.

Thanks.

[Geoff B.]

Hi again Karly,

To answer your question, the filter is for all mobile breakpoints, not specifically the filter bar’s breakpoint. You can see it here.

Furthermore, it is my understanding that the breakpoint is established through PHP, not Javascript (although you are right about the added CSS class).

To summarize, I am sorry to report there is no Filter Bar specific breakpoint code at this point.

Although not ideal, there are still 2 things that you can do:

1. Suggest it as a feature by logging it here
2. Explore the idea of making the sidebar float at the bottom of your WordPress theme (after the content) on mobile devices

I wish there was a better answer available, but this is all I can provide for now.

Thank you for your understanding  and let me know if you have any other question.

Have a great day!

Geoff B.

[Sean]

Hi Geoff,

Thanks for your response and this info. I apologize, but I’m still a bit unclear regarding a few aspects of this. If you can address the following, it would be greatly appreciated:

1. I understand that the tribe_events_mobile_breakpoint filter applies to all mobile breakpoints. Does another filter exist for modifying the Filter Bar’s breakpoint?
2. Can you please confirm if the Filter Bar has its own mobile breakpoint or if there is only one mobile breakpoint for the entire calendar?
3. If we want to set the Filter Bar’s responsive breakpoint to kick in not only when the screen size reaches the calendar’s breakpoint, but also when the size of the container holding the calendar reaches that same breakpoint, what is the best way to achieve that (for a non-developer such as myself)? Should we start by copying the Javascript that calculates the container width and adds a CSS class? Or is another method recommended? In either case, can you please share where the aforementioned CSS and JavaScript files are located?

Best regards,
Karly

[Geoff B.]

Good evening Karly,

Sorry about the confusion, I will try to provide a clearer answer.

1. I understand that the tribe_events_mobile_breakpoint filter applies to all mobile breakpoints. Does another filter exist for modifying the Filter Bar’s breakpoint?

I hate to be the bearer of bad news, but the answer is no. There is no existing filter to modify the Filter Bar’s breakpoint.

2. Can you please confirm if the Filter Bar has its own mobile breakpoint or if there is only one mobile breakpoint for the entire calendar?

There is only one mobile breakpoint for the whole calendar. The Filter Bar does not have it’s own mobile breakpoint.

3. If we want to set the Filter Bar’s responsive breakpoint to kick in not only when the screen size reaches the calendar’s breakpoint, but also when the size of the container holding the calendar reaches that same breakpoint, what is the best way to achieve that (for a non-developer such as myself)? Should we start by copying the Javascript that calculates the container width and adds a CSS class? Or is another method recommended? In either case, can you please share where the aforementioned CSS and JavaScript files are located?

That is a very good question, but that level of customization is slightly outside the scope of what our support usually entails.

You should also know that resizing an element based on another element’s size instead of the screen size is not a common practice, but it is still feasible.
That being said, I would still like to point you in the right direction so that you can get started.

The first thing I would do is to kill the built-in breakpoint completely (you can see the function here).
In fact, I would first check how you like the effect of just doing that part.

Then, I would code (or in your case hire a programmer) a custom function using combination of Javascript/JQuery.
As an alternative, you might try your luck in a forum such as Stack Overflow where they are already discussing similar topics.

You never know, you might get somebody to provide you with a code snippet.

I wish I could offer more assistance on this topic, but I hope this at least clarifies things for you and gets you started on the right track.

Is there anything else I can help you with ?

Best regards,

Geoff B.

[Sean]

Hi Geoff,

Thanks for clarifying. With this I was able to get to where I needed. Appreciate your help.

Best,
Karly

[Sean]

PS – Can you please let me know where these are located. I have been unable to locate them:

1) The Javascript file that controls adding the breakpoint calculation for the container.
2) The CSS file that sets the breakpoint for the calendar (Adding the filter is my case is not allowing me to override the breakpoint, so I need to try changing it in the source file if my theme is prohibiting the function from working).

Thanks.

[Geoff B.]

Good evening Carly,

I am glad you made some progress and that my comments were helpful to you.

1) The Javascript file that controls adding the breakpoint calculation for the container.

The mobile breakpoint control can be tweaked by taking a look at the following files:

• /wp-content/plugins/the-events-calendar/common/src/functions/template-tags/general.php (around lines 654 and 1569)
• /wp-content/plugins/the-events-calendar/src/resources/js/tribe-events.js (from lines 1091 to 1200)

2) The CSS file that sets the breakpoint for the calendar (Adding the filter is my case is not allowing me to override the breakpoint, so I need to try changing it in the source file if my theme is prohibiting the function from working).

If possible, I would recommend doing using your own CSS files instead of modifying the core ones. But to answer your question, there are 2 CSS files that control the mobile display.

Which one to use will depend on your setting for Default stylesheet used for events templates found under Events -> Settings -> Display.

All 2 files are located in/wp-content/plugins/the-events-calendar/src/resources/css:

1. tribe-events-full-mobile.css
2. tribe-events-theme-mobile.css

Let me know if you have any other question.

Have a wonderful night,

Geoff B.

[Sean]

Thanks Geoff. Just to make sure I’m understanding how the tribe_events_mobile_breakpoint filter works. Does it only change when the Month View calendar changes to the small layout or does it change the breakpoint for everything (when the screen size reaches XXX pixels or if the calendar is sitting in a container that is less than XXX pixels)?

[Geoff B.]

You are welcome Karly.

To answer your question, the tribe_events_mobile_breakpoint changes the breakpoint for everything when the screen size reaches xxx pixels).

As we discussed earlier in this thread, at the present moment we do not make display adjustments based on container sizes, but rather based on the screen size.

Is there anything else I can help you with on this topic ?

Have a great day!

Geoff B.

 

 

[Sean]

Geoff,

Thanks for confirming that tribe_events_mobile_breakpoint changes the breakpoint for everything.

With that said, can we loop someone else in on this to confirm how the responsive/small layout is or is not displayed based on the container’s size? You’re saying that the calendar does not change its layout based on a container’s size (and only changes based on screen size). However, this Knowledgebase article states otherwise: https://theeventscalendar.com/knowledgebase/month-view-displays-in-mobile-view/

The calendar automatically switches from the large screen layout to the small screen layout if the browser is less than 768 pixels wide. We call this the calendar’s responsive breakpoint.

And it’s not just if the screen is less than 768 pixels, but the container holding the calendar as well. If the calendar is sitting in a container that is less than 768 pixels, then it will respond to that breakpoint.

I’d just like to get confirmation on what is the case. If we can loop in either someone else that’s more familiar with this aspect of the calendar, or better yet, the actual developers, it would be greatly appreciated. As it currently stands, I’m not sure what to believe and with my theme seemingly not allowing the above filter to change the breakpoint, I haven’t been able to troubleshoot that given the fact that I’m still not sure when the calendar should be switching to the small screen layout.

Thanks again for your time and help with this!

[Geoff B.]

Good afternoon Karly,

As per your request, I did run the whole thread by another senior Support tech (there was already another one involved in the previous answers).

It turns out you are absolutely right, can be confusing. In fact our docs are not very clear on the distinction between screen size and container size. But in the end, there should not be a distinction in our opinion.

After internal discussion, we feel that it is a totally valid bug that tribe_get_mobile_breakpoint() doesn’t apply to the filterbar the same way it does elsewhere. We feel it should and we are going to build on our end for this.

With that in mind, I opened a ticket to that intent. I cannot commit to a specific date at this point since this has to go through a priority queue. But, it will get done and we’ll make sure to contact you when the fix is up and running.

As a workaround for now I would modify the /the-events-calendar-filterbar/src/resources/css/filter-view.css and its breakpoint so that it kicks in at the same time as tribe_get_mobile_breakpoint() does.

This can be done by seeing what screenwidth tribe_get_mobile_breakpoint() is actually kicking in at, and then setting that CSS file to kick in at the same screen width.

Is there anything else I can help you with on this topic for now ?

Have a wonderful day!

Geoff B.

 

[Sean]

Good evening Geoff,

Thank you so much for running this by the other team members. I’m happy to hear that there are plans to modify when the Filter Bar’s small layout kicks in. Having it change not only based on the screen size but also when the width of the calendar’s container reaches that same breakpoint (as is the case with the core calendar) will certainly improve the user experience for sites that have sidebars. In the meantime I will definitely alter the Filter Bar’s CSS so that it achieves a similar result.

Again, appreciate your patience in working through this with me. I was a bit lost at the start, but with all the info and clarification you’ve provided, I have a much better understanding of how the breakpoints for the core calendar and Filter Bar work now.

Best regards,
Karly

[Sean]

This reply is private.

[Author]

Posts