0

I'm attempting to setup a Masonry Wall with a design that uses a fixed sidebar menu layout, it works to some degree but it is adding a bottom gutter, which resolves after resizing the viewpoint. This issue only seems to occur when using Firefox and Edge, Chrome seems to work fine.

This practical error certainly seems to be doing is doing the rounds on Stack Overflow. Most of these issues listed on Stack Overflow are resolved by ensuring that the masonry is fired after the page load to correctly calculate the positions. However sadly this is the case and I think it may be related to my sidebar menu.

JSFiddle

Using jQuery(window).load(function(){ does not seem to resolve the issue. Adding the position fixed to the right side container does fix the issue but breaks the scroll and prefer not to use this method if it can be avoided.

I've take the time to add this project to a JSFiddle to help diagnoses this issue.

Screenshot of Issue

masonry gutter and margin issue

HTML

Unrelated full code can be reviewed on the JsFiddle or my Dev Site.

<div class="amino-wrapper">
    <div class="amino-wrapper-left"><!-- SIDE BAR --></div>
    <main class="amino-wrapper-right">
        <div class="grid">
            <div class="grid-sizer"></div>
            <a href="#" class="grid-item"><img src="#"></a>
            <a href="#" class="grid-item"><img src="#"></a>
            <a href="#" class="grid-item"><img src="#"></a>
        </div>
    </main>
</div>

CSS

Unrelated full code can be reviewed on the JsFiddle or my Dev Site.

img {
  max-width: 100%;
  height: auto;
}

.amino-wrapper {
    height: 100%;
    width: 100%;
}

.amino-wrapper-left {
    background-color: #1c1c1c;
    border-right: 1px solid #eee;
    color: #eee;
    height: 100%;
    left: 0;
    padding: 4rem 2rem;
    position: fixed;
    top: 0;
    width: 300px;
}

.amino-wrapper-right {
    margin-left: 300px;
    overflow-x: hidden;
    position: relative;
    top: 0;
    width: calc(100% - 300px);
}
.amino-wrapper-left header {
    left: 0;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    text-align: center;
}
.grid-sizer, .grid-item  {
  width: calc(100% / 3);
  width: 33.33%
}

.grid {
  overflow: hidden;
}

JavaScript

jQuery(window).load(function() {
    jQuery('.grid').masonry({
        // set itemSelector so .grid-sizer is not used in layout
        itemSelector: '.grid-item',
        // use element for option
        columnWidth: '.grid-sizer',
        gutter: 0,
        percentPosition: true
    })
});
Simon Hayter
  • 3,131
  • 27
  • 53
  • I don't see that issue (I'm using a Mac with Chrome). Not sure if this will help due to the JS, but try setting images to display block. I find that that gets rid of the gap below pictures. – coopersita May 21 '16 at 16:38
  • Can confirm that it works in Chrome, fails in Firefox and Edge. Thanks, will add this information to the question. – Simon Hayter May 21 '16 at 17:11
  • @coopersita `display: block` sadly has no effect: https://jsfiddle.net/SimonHayter/5hgkaj9y/11/ – Simon Hayter May 21 '16 at 17:15

1 Answers1

1

The following CSS fixed this practical problem for me:

  • body { overflow-y: scroll; }
Simon Hayter
  • 3,131
  • 27
  • 53