Events List Widget in two columns

[Tony]

I would like to display my events with the Event List Widget in two columns, so that it looks like this:

Event1 | Event2
Event3 | Event4

Or this:

Event1 | Event3
Event2 | Event4

I’ve tried copying the content of the “li” in the events-advanced-list-load-widget-display.php and putting the first in a div that floats left and the second in a div that floats right. This works, but it repeats the same event so that what I end up looks like this:

Event1 | Event1
Event2 | Event2
Event3 | Event3

Is there something in the code I need to edit to prevent the second instance being a repeat of the first?

Or is there maybe an easier way to do this by simply having two instances of the widget, the first widget showing events 1, 2 & 3, and then the second showing showing the next 3 (4, 5 & 6)?

Unfortunately, it’s not possible to have two separate widgets made up of two separate categories on my site, as the site is a community site with events/categories created/chosen by external users.

[Tony]

It should look like this:
Event1 | Event4
Event2 | Event5
Event3 | Event6

[Tony]

Ignore my 2nd comment….

[Jonah]

Hey Tony,

You should be able to do this with pure CSS. Have you tried floating the li elements for each event?

For instance, simply applying this CSS should get you started:

.eventsListWidget li, .eventsAdvancedListWidget li {
float: left;
width: 120px;
}

– Jonah

[Tony]

Great, thanks, Jonah!

[Jonah]

So does that give you everything you need here Tony?

– Jonah

[Tony]

Yes works great thanks.
I like simple solutions!

[Rob]

We do too, Tony 🙂 Glad to hear this was of some value. Let us know if you need anything else down the road, and thanks again for your support so far.

[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