1. pat02
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 29 August 2018
  5.  Subscribe via email
Hi

With your J51news module I display articles in two columns. Works fine.

Unfortunately the articles have a gap because the articles are not all of the same height. Please see attached picture.

Is it possible to remove this gap (masonry layout)?

If I set the columns to 1 in module parameter and add following CSS:


.j51news .j51news_inside {
column-count: 2;
column-gap: 0.9em;
}

.j51news .newsitem {
display: inline-block;
margin: 0 0 1em;
padding: 0 !important;
width: 100%;
}


I get two nice columns without gap. But the article sort order is wrong. The News are sorted
1 | 4
2 | 5
3 | 6

instead of
1 | 2
3 | 4
5 | 6

So this CSS can't be used.

Is there a way to make your module to list aticles of different height nicely without gap?

Thank you very much!

Regards
Patrick

gap-in-columns.jpg
Attachments (1)
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Patrick

Would you have a URL to an example of your news module?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Information just sent by email.

Thanks a lot!

Patrick
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Patrick

I now understand your issue. Unfortunately, the column-count property is limited regarding item ordering (as you have pointed out). The only way around this is to use javascript to set the positioning (eg. https://masonry.desandro.com/).

If you can bare with me a few days, I will look into adding the masonry script to the news module.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

If you can bare with me a few days, I will look into adding the masonry script to the news module.


Yes, of course. Thanks a lot!

Patrick
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Patrick

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will make this amendment for you. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Mail sent.

Patrick
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Patrick

The masonry script has been added to your news module as requested.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran and thanks a lot!

Looks great!

Will do testing and let you know the results.

Have a nice weekend.

Patrick
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
Note the count-column CSS has been removed. Your module should now respect the column settings in your module settings.

Enjoy the weekend!

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Everything works fine now.

Thank you very much for your great help!

Best regards
Patrick
  1. more than a month ago
  2. Commercial Templates
  3. # 10
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok