Search box problem

Hi @andrewleonard ,

Thank you for reaching out.

I suspect this is due to the fact that the calendar is placed in a narrow container. To try and get around this, we can try and change the responsive breakpoints (see Responsive Templates).

Kindly try appending the following custom snippet to your theme’s functions.php file or through a Code Snippets plugin.

function customize_tribe_events_v2_medium_breakpoint( $breakpoints ) {
  $breakpoints['full'] = 760;
  $breakpoints['medium'] = 500;
  $breakpoints['xsmall'] = 420; 
  return $breakpoints;
}
 
add_filter( 'tribe_events_views_v2_view_breakpoints', 'customize_tribe_events_v2_medium_breakpoint' );

Hi @andrewleonard ,

Thank you for your message and the clarification.

I’m afraid It is a default behavior for the search box to collapse to a magnifying glass when the calendar’s container becomes too narrow for screen real estate considerations.

In narrower screens (i.e. mobile device), the user is subtly presumed to tap on the magnifying glass icon to bring up the search field, by design.

Hi @andrewleonard ,

Thank you for your message and the clarification.

Clicking on the magnifying glass icon is supposed to work like clicking on a dropdown on this case. However, it seems there’s some space in between the search textbox and the “Find Meetings” button, which is throwing off the layout. So, what we can do here is remove that space with the following custom CSS snippet.

Kindly try appending the following CSS snippet to your theme’s additional CSS section (Appearance -> Customize -> Additional CSS), and see if this works for you.

.tribe-events.tribe-common--breakpoint-xsmall .tribe-common-c-btn.tribe-events-c-search__button {
    margin-top: unset !important;
}

Hi @andrewleonard ,

Thank you for your message, and I’m sorry to hear of the continued difficulties.

The “overlay” behavior is intentional and is how tapping on the magnifying glass on the calendar was designed to work on mobile devices.

However, I suspect there’s a conflict that’s causing the background elements to still be visible on the overlay here. It would be good to test for conflicts. Could you follow the following steps?

1. Deactivate all other plugins except for The Events Calendar Plugins.
2. Switching to the Default theme.

Please read the Testing for Conflicts Article before doing anything. 
To be safe, we’d recommend conducting tests and updates on a Staging Server. Also, please keep a working backup of your website.

Hi there,

It appears that we haven’t heard back from you in a while, so I’ll go ahead and close this thread for now. If you need any more help, feel free to start a new thread and we’ll be happy to assist you.