Masonry item margin-bottom issue

Question

I've activated Masonry on the parent element (an unordered list) that houses the modified list items listed below (with Chrome's F12 DEV tools showing the margin-bottom and margin-right in the pink-ish color):

Masonry Problem before Resizing

When the document is loaded, the above occurs despite the CSS of each list item being the following;

li {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    float: left;
    padding: 20px;
    position: relative;
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
}

The jQuery I used is the following;

$(document).ready(function(){
    $("ul").masonry({
        itemSelector: 'li'
    });
});

Once the window is resized horizonally, however, the CSS styles come into effect as shown below;

Masonry Problem Solved by Resizing

Any idea as to how I can acheive the above on page load?

UPDATE*

JSFiddle: Click here. If the said problem doesn't appear, try clicking the 'Run' button (Ctrl + Return).

How do you size your Elements? fixed or with %? - dumb Question ;) — j_s_stack, Jan 15 '15 at 03:28
@j_s_stack the ul is sized at 100% of parent (body), and the li are (50% - 10px) — Ravindu Liyanapathirana, Jan 15 '15 at 03:30
http://masonry.desandro.com/options.html#gutter for the Horrizontal Space — j_s_stack, Jan 15 '15 at 03:34
@RavinduL So the issue is that when the page loads there is no space between them when there should be? — jmore009, Jan 15 '15 at 15:14

score 6 · Answer 1 · answered Sep 27 '15 at 21:53

6

For the webkit browser problem I simply added $(window).load(function(){ before ('#masonry').masonry({. Now the margin-bottom is fine on every item on every browser.

answered Sep 27 '15 at 21:53

truemiro

95
1
7

I had to do this too, I assume because images were involved. – Brett Mar 14 '20 at 14:09
This is the right way to do it ! Works without gutter to fix the bootstrap flex width issue – Xavier C. Oct 18 '20 at 10:50

score 2 · Answer 2 · answered Jan 15 '15 at 04:53

2

It works finde as sone as I add gutter: 10 ;

$("ul#news").masonry({
    itemSelector: 'li',
    gutter: 10
});

Explenation: http://masonry.desandro.com/options.html#gutter

answered Jan 15 '15 at 04:53

j_s_stack

659
1
5
18

If you have a look on Item #3 in the DEV Tools What does it say/show – j_s_stack Jan 15 '15 at 04:58
it seems like ist depends on the Browser you user – j_s_stack Jan 15 '15 at 05:03
Hmm yes... It works perfectly in Internet Explorer... Apparently it becomes defective only on Webkit browsers like Chrome... Do you know a workaround that might fix this? – Ravindu Liyanapathirana Jan 15 '15 at 05:25
no Idea - but Firefox also doesnt get it quit right – j_s_stack Jan 15 '15 at 05:27

score 0 · Answer 3 · answered Jul 16 '16 at 14:07

0

I had the same problem until now.

I've removed all margins altogether and let masonry handle it ("gutter"-option) and it works fine!

Hope that helps!

answered Jul 16 '16 at 14:07

Mario Haubenwallner

1,525
1
14
21

Masonry item margin-bottom issue

3 Answers3