[Resolved] possible conflict between The Events Calendar and GP Premium

[Robert]

When the ‘updated designs’ are enabled for The Events Calendar and Tribe Events Styles are active, the default list of events view frequently loads with a broken layout on first render. The events search bar seems to be confused about the viewport size, the featured images for events are grossly oversized, and the event descriptions are hidden. On subsequent views (page refresh, click into an event and then back out) the layout is usually correct. The markup is identical in all cases, so I suspect this is some kind of timing issue or race condition in Javascript. I suppose there’s also a chance it’s a browser bug.

It seems like it might be related to items being shown or hidden according to a11y classes, and those styles being overridden (or not) by Javascript. I’m testing on macOS 10.15.7 and this problem is reproducible in Chrome and Firefox. It’s harder to reproduce in Safari, but I have seen it there too.

Anything that changes the viewport size immediately fixes the layout, e.g. adjusting the size of the browser window or opening the inspector.

I’ve created a demo site at https://tectest.mystagingwebsite.com/sales-and-events/. I am unable to reproduce the problem with Twenty Twenty-One theme, or with GeneratePress free version. However, it is reproducible consistently after installing and activating GP Premium. The only active plugins are GP Premium and The Events Calendar.

This is a throwaway clone of a client site that we’re rebuilding, so I’m happy to provide admin credentials if required.

[Elvin]

Hi Robert,

Can you try adding the CSS provided here?

https://generatepress.com/forums/topic/generatepress-theme-conflicts-with-the-event-calendars-list-view/#post-1643824

Let us know how it goes. 😀

[Robert]

Yes, that appears to resolve the issue.

Why does this work? It seems like those containers were {width:auto;} without this snippet. It also seems to work with any fixed width value.

[David]

Hi there,

i can’t explain why there would be a difference between GP and GP + GPP – as the ‘issue’ is related to flexbox, and GPP wouldn’t be doing anything different in that regards.

The issue itself is how flexboxes can collapse to a minimum size, this happens when you have flexbox elements inside a container that has no fixed width that is sitting inside another flexbox ( the themes content container ).

On initial load, the absence of that width will allow the first tribe container to collapse, and the flexbox items within will reflow to suit. By adding the width you stop the collapsing from happening.

[Robert]

I see, thanks.

Can I assume I will have to apply this snippet to other sites, i.e. it’s not going to be included in a future GP release?

[David]

The only CSS required should be this:

.tribe-events-view {
    width: 100%;
}

And we wouldn’t want to bake plugin specific styles into the theme, as thats just redundant code for everyone not using Tribe Events and something we have to maintain inline if the plugin changes. And using a catch all selector to force elements inside the #content container would probably break more things then it would fix.

The better solution would be to speak to Tribe about adding the width value to their tribe-events-view container. I would expect there are other themes that are using flexbox that would have a similar issue as this. And i cannot see adding the width: 100% property in their CSS would cause any problems ( it will just make sure their container always fills the available space ).

[Robert]

That’s much better. I understand why you wouldn’t put this CSS in GP.

I already reported the original issue to Modern Tribe and showed them this thread, so hopefully they’ll consider this change.

Thanks!

[David]

Awesome – lets hope they do.

Glad we could be of help.

[Author]

Posts