Events not displaying in order

Hi Melanie,

Glad you’re enjoying the plugin.

I’m not seeing the problem on your site, even when resizing. Is there a particular size or device that’s triggering the problem?

Hi – thanks for your reply.

I’m actually seeing this problem everywhere! Examples:

1. On my iMac in Firefox. This page https://www.visitwollombi.com.au/hunter-valley-events/
Dates are displaying – First row – 10 Jun, 11 Jun, 12 Jun (all ok)
2nd row – 18 Jun, 24 Jun, 25 Jun (all ok)
3rd row – 1 Jul, 9 Jul, 8 Jul (no ok)
Screenshot – https://pasteboard.co/gL7lg07PD.jpg
4th row – 15 Jul, 22 Jul, 16 Jul (not ok)
5th row – 13 Aug, 20 Aug, 12 Aug (not ok) and from there on a fairly similar result.

2. Same thing on my iPad – a couple of screenshots here:
https://pasteboard.co/gL5qsVxtp.jpg
https://pasteboard.co/1FUoN4X7X.jpg

Any ideas what might be going on?

Regards
Melanie

Hello! I’m really hoping to get this one sorted out soon … any ideas what the problem might be??

Regards
Melanie

I am not part of support just some dude…

My first question would be what are using to display the events in a “poster board” grid layout?

I am guessing it it is theme based or maybe another plugin.
I looked at your pages a couple of days ago… and again this morning.

The first thing that I see is that the order of dates “breaks” after the August 25th events… the next row of dates becomes jumbled.
The image for that date appears to be bigger in your layout… than the other images.

It may be possible that the image size variance is causing the layout date jumble, when it loops through events to actually “step” down a row.. but when it is presented on the webpage.. the stepped down row isn’t actually shown… but combined with the dates afterwards.
For example it might actually look like this
Aug 25 (bigger image) | Aug 26 | Sep 02
“Blank” | Sep 09 | Sep 10
Sep 10 | Sep 16 | Sep 17

I don’t know if that makes sense to you.. but there is something with the first column after the Aug 25 (bigger image) when the grid layout is being produced that way.

One way you may try testing is to eliminate the images from the layout being produced.
A second way might be with a completely different grid layout as shown here
https://www.ads-software.com/support/topic/tutorial-events-list-grid/

Good luck.. let us know if you get it sorted out and mark resolved if possible.

I agree that this is likely to be a theme issue. Can you test with the default WordPress theme?

Thanks for your reply – If I switch to a default WordPress theme I’m not seeing the 3 column layout, so I don’t think that really helps me. The way the grid layout is being displayed is by code in the Events Manager Settings – Formatting – Events – Default Event List Format Header & Default Event List Format. Screenshot of code is here – https://pasteboard.co/igUkUTdg7.jpg

If anyone can help with how the code should be amended, I would really appreciate it! Or different code to achieve the same sort of layout. Thank you!

Regards
Melanie

A number of users have used the code created by @robswaimea and linked to in the post above. You might want to look into that.

Once again… I looked at your page.. and experiment around..
It’s probably not the Image size topic I brought up.. just a shot in the dark.
I also looked at your Theme “The7” official page and a lot of the “demos”….
So I would suggest you ask them what the problem is….

OR—-> use the the grid layout in the Tutorial I mentioned in the link above….

Ok… to help you out….
Make a test page you can work on.. I usually make them private… or public.. it doesn.t really matter.

The Grid Layout will display “boxes” of Events… in a Grid.
The number of “boxes” across, will depend upon your page width.
AND the “box” sizes, ie: small boxes, more across a row.

Use this code to produce an Events list.. you can customize later to match your needs.
WARNING WARNING WARNING…

USE THE TEXT EDITOR NOT VISUAL EDITOR.
If you switch back and forth between Text Editor and the Visual
it will mangle the “ul” statements.

<div  style="max-width:950px;margin-right:auto;margin-left:auto">
<div class="row">
<div class="col-3ex exmenu">
<ul>
[events_list limit=12]
<li>
<div style="margin-right: 5px; text-align: center;" align="center">#_EVENTIMAGE
<span style="font-size: 12pt; font-weight: bold;">#_EVENTNAME</span>
<span style="padding: 2px; text-align: center; border: solid black 1px; border-radius: 4px; background-color: #e6e6e6; font-color: #000000; font-size: 16px; font-weight: bold;">#_EVENTDATES</span></div>
</li>
[/events_list]
</ul>
</div>
</div>
</div>

Now we have the CSS for the above..
Put it in your child theme or however you edit CSS code for example an CSS Editor.
OR….
What I love to do, especially when testing pages etc is use this plugin
that you can add code to the header or footer on a per page or post.
https://www.ads-software.com/plugins/oh-add-script-header-footer/

The below CSS will make “boxes” approx 260px wide… you can adjust the Min and Max
statements to make the “boxes” however you wish…
And obviously the colors etc etc…
You MIGHT have to add “!important” to some of it if your
Theme overrides some of the CSS statements.

  <style>
.col-3ex > ul > li > div > span {
    overflow: hidden;
    padding: 0 5px;
    display: inline-block;
    /*text-overflow: ellipsis;*/
   /* white-space: nowrap; */
    max-width: 305px;
}

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
       padding: 15px;
}
.col-3ex {width: 100%;}

.exmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
   
}
.exmenu li {
    padding: 8px;
    margin-bottom: 7px;
    margin-right: 5px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border:solid black 2px;
    border-radius:10px;
    display:inline-block;
    min-width:300px;   
    max-width:300px;   
    vertical-align:top;
  }
.exmenu li:hover {
    background-color: #0099cc;
}
</style>

• This reply was modified 7 years, 9 months ago by Robswaimea.

sorry I made a slight mis type when I edit the CSS to look more like your page..
The below CSS will make “boxes” approx 260px wide…

below is correct for the post above and my re-edit.
The below CSS will make “boxes” approx 300px wide…

Thanks for all your help everyone. I haven’t managed to get this working yet, but will spend some time seeing if I can work through all the comments.

My first attempt produced this https://www.webfactory.com.au/testsites/wollombi/hunter-valley-events/ which I can’t say looks much like this https://www.visitwollombi.com.au/hunter-valley-events/ Not quite sure if I understand where all the blocks of code are supposed to go, and not quite sure how to get the images to display larger?

Regards
Melanie

For the images, I used the generic placeholder #_EVENTIMAGE
You can find the parameter for that placeholder to make the images larger at
https://wp-events-plugin.com/documentation/placeholders/
It’s good if you study that page to learn about all the placeholders and options.

Your theme is using a thumbnail for the image… hopefully the placeholder
#_EVENTIMAGE{x,y} will override that thumbnail giving you a good image..
ie:not a little one scaled larger.
If not you’ll have to figure that one out.

Well.. at least you are getting somewhere and learning something in the process.
Good luck.

So I got bored today just cranking out data…
and I had some funky fun.. obviously the “colors” are not matching your site but I have them to show diversity..
So this would basically be a full page width…

And this would be for example on a small device.. ie: small phone approx 360px wide.
It doesn’t matte how wide/narrow your screen is… the “grid” wraps no problem.

• This reply was modified 7 years, 9 months ago by Robswaimea.
• This reply was modified 7 years, 9 months ago by Robswaimea.

Overall, the event manager should ‘behave’ more like Meetup or Ning:

The event manager should:

Distinguish between users:
IT Admin – access to WP dashboard, can create events
Event Coordinators – approves attendees, can edit events, can access attendee’s email address
Attendees – registers for events
Have a simple web interface (not the WP dashboard) where NON-ADMINS can access, approve, change events and attendees.
Allow setting ‘reminders’ to send email to registered attendees 48 hours before event
Allow multiple people to be notified by email, not just one; preferably different event types to different email
Create and keep a table/file of all email addresses registered so that coordinators can email them in case of changes and allow ‘email blasts’ notifying folks of upcoming events
Allow thumbnail graphics on listings for events when there is more than one event on that day.

We would very much like to keep our website as the ‘home’ for all events and have them populate to our Facebook and Meetup pages, rather than the reverse, so that we have more control, but as it is now, the tools are not doing what we need to do.

@aterorob Just about everything you’ve mentioned can be done with Events Manager. If you’re having trouble working out how to something please open your own thread. Thanks.

Thanks again @robswaimea for all your help. I’m finally getting around to trying to sort this out, but on another project. I’ve gone through your instructions here https://www.ads-software.com/support/topic/tutorial-events-list-grid/#post-9474576 and left a comment, as there’s a couple of things that aren’t behaving as I’d expect.

If you have any thoughts I would be very grateful. The Events page I’m working on is here – https://www.webfactory.com.au/testsites/around/hunter-valley-events/

Regards
Melanie