CODEWITHSUNDEEP
javascriptcssheightjquery-masonry
nkcmr
nkcmr

Reputation: 11000

jQuery masonry issue with display and height on load

I have a masonry container inside of a div that has display:none in inline style. Because I have a few divs, when the page loads it switches like a slideshow when their button is clicked. This interferes with masonry's ability to gauge the height on load so consequently the bricks spill out of the container.

Upvotes: 1

Views: 12410

Answers (1)

thirtydot
thirtydot

Reputation: 228182

Update: the .load() part of my answer is not how this should be done.

See: http://masonry.desandro.com/layout.html#imagesloaded

You can fix it by:

  • Adding overflow: hidden to .panel to clear the floated elements inside.

  • Running Masonry on .load() instead of .ready():

    <script type="text/javascript">
    $(document).load(function (){
      $('#contain').masonry({
        itemSelector: '.item',
        columnWidth: 100
      });
    });
</script>

Version with those fixes: http://jsbin.com/oyido4/4

Upvotes: 6

Related Questions