Past Event Ordering Gone Wild Part 2

[Matthew MacMillan]

Ok, I’ve gone through your documentation, disabled ALL plugins except yours, updated everything, and have switched to the Twenty Fourteen theme.

This is a continuation of the post “Past Event Ordering Gone Wild” where we ended with you saying you couldn’t fix the problem because you couldn’t recreate it on your local device. There’s no doubt in my mind, this is not in my system, something in the plugin code or settings is not allowing these past events to list out chronologically. Not sure how they are getting their order, but it’s not chronological.

Another oddity is that some of the listings show the year, others do not. For this particular installation, the ordering of those past events is very very important. Can you please take another look at this on MY environment and see if you can see the problem?

I’m happy to give you full access.

Matt

[Andras]

Hello again Matthew,

Thanks for reaching out again with this issue.

What you are experiencing comes from how the layout in handled in the photo view. This is not really an Events Calendar thing, it is more an HTML and CSS thing. Let me try to explain how it works, based on the past events page of your staging site:

The different events are in separate boxes which have different heights. These blocks come in from the right in the right order, just as if you were playing tetris with a screen that’s rotated 90 degrees clockwise. And there is gravity on the top left corner pulling everything there.

You have 3 columns. So the 1st block (John Jay) comes, good. 2nd (Yoga Zone), good. 3rd (Athleta), good. You see that the 2nd column is taller, sticking out at the bottom.

So the 4th block (Yoga Zone #2) comes, doesn’t fit any more on top of the 3rd block, so slides down, until it can move. It reaches the bottom of the 3rd, gravity on the left pulls, but gest stuck  on the bottom of the 2nd block. And stays there.

So comes the 5th block (Veteran’s Week), slides down on the 3rd and then the 4th block, then gravity pulls it to the top-left, so ends up below the 1st.

Then comes the 6th block (The Art of…), slides down on the 3rd and then the 4th block, then gravity pulls it to the top-left, so ends up below the 2nd.

And so on.

So this is why it ends up like a mixed salad.

One workaround would be to fix the height of all the boxes to the same height. However, that can cause large empty spaces between the rows, depending on the original height of the blocks. If you want to try this, then paste this snippet in your theme’s style.css file:
.tribe-events-photo-event {
height: 200px !important;
}
You can customize the height to your needs.

Let me know if you have any followup questions.

Cheers,
Andras

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts