CODEWITHSUNDEEP
jqueryhtmlcssmasonry
BB23
BB23

Reputation: 185

Masonry sometimes not displaying content properly

I am creating a website and I want to use Masonry there. https://masonry.desandro.com I am facing a problem where I have absolutely no idea where it might come from.

The masonry is working fine when I am logged in. As soon as I log out it seems like the jquery code is not used.

I already checked the html file and used an diff checker too. I couldn't find a reason for the problem. No matter if logged in or logged out the selector path for the container is the same. Deleting certain parts of my index.html and moving the script to call it (see code below) causes the masonry to work not even when I am logged in. (So neither when logged in or logged out then.)

I have no idea where and what could cause the error. So I don't know which code to provide. I would really appreciate someone telling me where and what the error should/could be located it. I am sorry for the rather poor description. I have never worked with jquery before and only had experience with html, css and javascript. 

<script>
$('#boxwebpart1817').masonry({
  // options
  itemSelector: '.message',
  gutter: 50,
  isFitWidth: true
});
</script>

Upvotes: 0

Views: 173

Answers (1)

Kostas Minaidis
Kostas Minaidis

Reputation: 5412

When the page is loaded, the <div class="webpartcontentorot"> element is placed inside another <div>. If you move the <div class="webpartcontentorot"> element outside this <div> and rerun the Masonry init script, the layout will be displayed correctly.

Now, I am not sure how you've integrated the Masonry section into this website or how the backend works, but you might want to check out this detail and try to figure out the root of the problem.

enter image description here

This is the page on the first load

enter image description here

I move the section outside the div, via the DevTools

enter image description here

I execute the Masonry init script, and the layout works perfectly

Upvotes: 1

Related Questions