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!