Shape 5

Joomla Club Extensions => Masonry - Club => : pjbg December 08, 2016, 01:03:45 AM



: Issues displaying masonry style when no image included - and no bullets
: pjbg December 08, 2016, 01:03:45 AM
Thanks for a nice extension ... however I have the following problems.

Problem 1:

I have set up ALL, News Category 1 and News Category 2.

When I click a menu to go to the page where this module displays, ALL is the default and all articles display correctly in "masonry" format (just like the demo).

When I click News Category 1 and/or News Category 2 all articles still display correctly.

When I then click ALL again, all articles display, but not in masonry format. That is, each pair of articles (2 column format) top justifies leaving white space depending on how long the above articles are. See attached jpg.

If I hit browser refresh or menu heading again it refreshes to view correctly.

The only way for me to fix this issue (after a very long time problem-solving) is to add an image to one of the articles (it seems not all, just one). Fixed. But what if I don't want to include any images?

Even if I add an image to one of the articles and then, via the module, say NO to display images, the problem remains.

I have set the module to "no caching".


Problem 2:

Bullet points don't work in the articles when displayed via the Masonry module. The same article when viewed via a normal menu item they work as expected. Do I need to add new CSS code?

Thank you for your help.


: Re: Issues displaying masonry style when no image included - and no bullets
: jonahh December 08, 2016, 12:54:46 PM
Hello,
 
Thanks for the images but do you have a live URL I can view this at to help determine the issue? Also please let me know in which article you have bullet points that aren't showing up.

Thanks,


: Re: Issues displaying masonry style when no image included - and no bullets
: pjbg December 08, 2016, 02:32:55 PM
Thanks. Have sent you a private message.


: Re: Issues displaying masonry style when no image included - and no bullets
: jonahh December 09, 2016, 02:39:43 PM
Thanks. In regards to the bullets not showing:

You can change it to the below but this will change it site wide too:

:
.module_round_box_outer ul, .moduletable ul {
    list-style: inside none disc;
}

editor.css line 10

If you want it to just change on the Masonry module add the following:

:
#s5_masondisplay_container ul {
    list-style: inside none disc !important;
}


: Re: Issues displaying masonry style when no image included - and no bullets
: pjbg December 10, 2016, 05:12:44 AM
Thanks for this information.

However, neither CSS solution works for me when I insert the code into my custom.css file.

If I remove "none" from your code, I do get bullets but the second line of text returns to align under the bullets, rather than hanging in line with the beginning of the first line of text.

My understanding of CSS to achieve the correct hanging style (the default style as described above) is to either use "outside" or nothing at all. When I remove "none" and "inside" the bullets disappear all together.

Again, bullets work fine outside of the masonry module.

Am I doing something wrong - or is there a broader issue here?

Thanks,


: Re: Issues displaying masonry style when no image included - and no bullets
: jonahh December 12, 2016, 01:15:42 PM
I just took a look at your site and the article "Winner of the 2016 NCWSBA Broker Award Announced" is displaying the bullets for me fine. If you still have an issue try clearing your browser cache.


: Re: Issues displaying masonry style when no image included - and no bullets
: pjbg December 12, 2016, 02:42:57 PM
I had removed "none" from your code so I do get bullets but the second line of text returns to align under the bullets (rather than hanging in line with the beginning of the first line of text). Which is not the way bullets are normally styled.

View the same article via the menu under news and you'll see the difference. Same article but delivered via the masonry module there is a style difference which I can't work out to solve.


: Re: Issues displaying masonry style when no image included - and no bullets
: jonahh December 13, 2016, 12:36:45 PM
They both look the same to me the only difference is the article in Masonry module has a small width so the text for the bullet drops to the next line. If you view the article in the news menu there is plenty of width for the bullets not to have their text drop or wrap to the next line.


: Re: Issues displaying masonry style when no image included - and no bullets
: pjbg December 13, 2016, 05:38:18 PM
I'm sorry I may not have explained myself properly so please see 2 images attached. I've highlighted in yellow how the text behaves when it falls to the next line. Same article, same bullet coding, but the CSS behaves differently when viewed via the masonry module.

The only way to get bullets to actually show in masonry is to use "inside" in the custom CSS code. If "outside" is used (or leaving it blank which then is supposed to default to the "outside" style) no bullets show at all.

Meanwhile bullets show fine everywhere else on site.

I've also included a 3rd image which I generated from the W3 schools to help explain.

Thanks


: Re: Issues displaying masonry style when no image included - and no bullets
: jonahh December 14, 2016, 12:56:49 PM
Oh ok I understand, you would just need to change it to the below I believe

:
#s5_masondisplay_container ul {
    list-style: outside disc !important;
}

Also did you still want us to look into the Masonry module? I noticed your swapped it on your site to a different one.


: Re: Issues displaying masonry style when no image included - and no bullets
: pjbg December 14, 2016, 06:08:59 PM
Oh ok I understand, you would just need to change it to the below I believe

:
#s5_masondisplay_container ul {
    list-style: outside disc !important;
}

Also did you still want us to look into the Masonry module? I noticed your swapped it on your site to a different one.

Yes, that's the code that I believe should work but doesn't in a masonry article. That is the problem.

I am trying out another module for the home page news but will still use the masonry elsewhere where these 2 minor and specific issues will not cause any problems.

Therefore I appreciate your assistance but if you don't want to spend any more time on this I understand.

Thanks again.


: Re: Issues displaying masonry style when no image included - and no bullets
: jonahh December 15, 2016, 01:12:32 PM
Ok I see the issue. This should fix the bullets to what you desire to see on Masonry module:

:
#s5_masondisplay_container ul {
    list-style: outside disc !important;
    margin-left: 15px;
}

Its up to you in regards to the Masonry dropping down when clicking the "all" button.  I just want to make sure you are happy. If you aren't I can dig into if further if not we can end it here then.


: Re: Issues displaying masonry style when no image included - and no bullets
: pjbg December 15, 2016, 04:33:58 PM
That code fixed the bullet issue! Fantastic. Thank you. (actually 18px worked better; 15px cut off half the bullet).

Don't worry about the other issue for me: "Masonry dropping down when clicking the "all" button (but only when no images present)". I will work around this by not showing the category buttons up top when I use it.

Thanks again for your help. :)


: Re: Issues displaying masonry style when no image included - and no bullets
: jonahh December 19, 2016, 01:36:47 PM
Ok sounds good, let me know if you need any further help