Multi-Column layout of lists
By batvink on Tuesday, 18 October 2016
Posted in JEvents (Free Access)
Replies 7
Likes 0
Views 2.3K
Votes 0
Hi,

I am trying to create a multi-column list of events.
The problem I am facing is that the list is embedded in a table. Is this normal? I expected to see DIVs, Spans and other CSS to compose the layout.

Because it is a table and each event is a row, I can't get it to display side by side, with Floats or Columns CSS for example.

Thanks in advance for any advice.

Steve.
Hello,

Ok I see what you are wanting and you can do this with css/html with a table based layout you just need to tell it to be a block so:



.mod_events_latest_table.jevbootstrap tbody tr {display: inline-block; width:30%;  padding: 0 10px;}


should help you get started.

Many thanks
Tony
tonyp
·
8 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Steve,

Are you using the List of Events Menu Item? If so this is perfectly normal.

Can you provide a screenshot of what it is you are after?

Many thanks
Tony
tonyp
·
8 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for the quick response.
Here is the page with a simple one-column list at the bottom (2 events at the moment).

http://www.ourladyofvictorieschurch.co.uk/component/jevents/icalrepeat.detail/2016/10/20/17/-/soup-lunch-for-haiti?Itemid=310

Here is a page which is not a jEvents list, but you will see at the bottom how I would like to display additional events.

http://www.ourladyofvictorieschurch.co.uk/events/327-walk-to-the-new-parish-of-our-lady-of-victories-and-st-anne


Incidentally you will also see in the second example that I have the upcoming events in a right-hand panel. If I place the Event detail and list next to each other, it doesn't work. The list is placed under the jEvent article. In the markup it is actually a second row. The details are about this are on the Helix3 Facebook page here
batvink
·
8 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you again. inline-block is what I was missing!
I had tried with DIVs and SPANs and FLOATs with strange results!
batvink
·
8 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
hehe :-) You are very welcome!
tonyp
·
8 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post