[Resolved] The Events Calendar Not Displaying Correctly Flexbox

[Joel]

Hello, apologies I’m not able to share a link for you to check but you should be able to replicate by installing The Events Calendar plugin on any GP install with flexbox enabled.

Basically when you click View Calendar it no longer takes up the whole width of the container when Flexbox is enabled (it works fine if Floats is enabled instead). With flexbox enabled it looks like it’s constrained inside a single column?

Any suggestions?

Thanks

[Leo]

Hi Joel,

Any chance you can duplicate this issue on a staging site environment so we can take a look?

We would really appreciate that.

Thanks!

[Joel]

Here you go..I’ve added the url in the private info…I would appreciate it if this isn’t shared further on any screenshots etc – thanks 🙂

If floats is enabled it takes up the whole width like the demo https://demo.theeventscalendar.com

thanks

[Leo]

I feel like this is something Event Calendar need to improve on their end.

Does this CSS fix the issue?

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

[Joel]

Yes that seems better…thanks! And I’ll raise it with them too.

[Leo]

No problem 🙂

[Rick]

I ran into the same flexbox conflict issue today. I noticed it when it would randomly stack the event list flex items at large screen views making featured images in the event list HUGE (full screen). Once I refreshed the page, the flex items would fall back side-by-side instead of stacked. A few times it would lock into the non-full-width thing the OP described.

I reverted back to version 2 for now. Least painful course for me at this time.

Yes, this may be a The Events Calendar issue, but you might want to keep this on your radar. Lots of folks using both this theme and The Event Calendar.

Cheers!

[Leo]

Sounds good thanks 🙂

[Author]

Posts