Masonry not initializing when inside a tab pane

Wappler General Need Help
2

Component like masonry, google maps, swiper and others that rely on the height of the element they are placed into will always have issues with tabs, modals, collapses, initially hidden elements.
On page load these elements have a height of 0 as they have a style of display: none; applied.

In your case, your tab 2 is hidden on page load and masonry component doesn’t know what its height is. You need to “refresh” the masonry component on tab show.

Example code, that will do the job:


<script>
    $('#navTabs1_2_tab').on('shown.bs.tab', function (e) {
    dmx.parse("masonry1.reflow()")
});
</script>

Where:

  • #navTabs1_2_tab is the ID of the nav tab button (note - not the tab content id!)
  • masonry1 is the ID of your masonry component
  • .reflow() refreshes the masonry

So put this code at the end of your page.

2 Likes