Hello,

Sure try:

.mod_events_latest_table tbody > tr td {float:left;display:block;}

on JEvents -> Custom CSS

Thanks
Tony

PHP Version : 5.4.45

MySQL Version : 5.6.19-67.0-log

Server Information : Linux bh-uk-4.webhostbox.net 2.6.32-673.8.1.lve1.4.3.el6.x86_64 #1 SMP Wed Feb 10 08:57:30 EST 2016 x86_64

Fix jQuery? : Yes

Load JEvents Bootstrap CSS? : Yes

Max Input Vars ? : 1000

Club code set? : No  

User Agent : Mozilla/5.0 (Windows NT 6.1; rv:49.0) Gecko/20100101 Firefox/49.0  

Joomla : 3.6.2

component_com_jevents : 3.4.20

component_com_jce : 2.5.27

module_mod_jevents_cal : 3.4.20

module_mod_jevents_custom : 3.4.20

module_mod_jevents_filter : 3.4.20

module_mod_jevents_latest : 3.4.20

module_mod_jevents_legend : 3.4.20

module_mod_jevents_switchview : 3.4.20

plugin_content_jevents : 3.4.20

plugin_finder_jevents : 3.4.20

plugin_search_eventsearch : 3.4.20

plugin_system_gwejson : 3.4.20

Hi,

I've tried applying this to my site, but it is still displaying the module vertically. Any advice?

Its on the home page at http://www.marshfieldcricketclub.co.uk

Thanks

Hello,

Use:

.mod_events_latest_table tbody > tr {float:left;display:block;}

But you will need more styling still I suspect.

Thanks. That worked a treat, sorry to bother you again but how do I now make the events spread 100% across the page, and make them the same width.

I've think I've cracked it, thanks for your help.

And what a great extension. we've been using it for about 3 years now and its perfect for our uses. Cheers.

Sorry I didn't get back to you in time! But I'm Glad you cracked it :-) Please don't hesitate to post if you have any other questions.

Many thanks
Tony

Would have been so nice to tell us how you've cracked it
Anyone else?

You just need to know a little bit about CSS this should help get you started:

https://www.jevents.net/docs/jevents/item/customisations-with-css

Thanks for the quick respons. I'm having the horizontal layout almost exactly looking as the client wants it now. I have just a few small layout problems to solve. The events are now setup showing the 4 latest events next to each other, each event occupying the same width. I accomplished this with following format string:

<div class="event_layout">
${eventDate(%d-%m-%Y)} | ${loc_city}
<div style="display: inline-block;">${JEV_LIST_THUMBNAIL_1}</div>
<div style="font-weight: bold;">${title}</div>
<div>${content(140|...)}</div>
<a class="readmore_events" href="${eventDetailLink}">Lees meer</a>
</div>
</div>

And following custom css:

.event_layout
{
border:1px solid #dae0b2;
heigth: 300px;
max-width: 250px;
min-width: 150px;
margin: 0 auto;
padding: 5px;
vertical-align: top;
display: inline-block;
text-align: left;
}

The problem is that the title and content fields vary in length according to the event. The effect is then that the events are not nicely aligned at the bottom. A function like content(140... only solves my probleme partly, because it does not do the job when the content is shorter than 140. Is there a way to concat the content with for example 140 dots and the display only the 140 first characters? I mean somthing like ${substr(content(140|................................................................................),0,140)}?

Thx for any advice!

Hello,

I'm afraid not. what you want is some JavaScript to match height of the tallest box to the rest of the boxes.

Something like:
http://brm.io/jquery-match-height/

Many thanks
Tony