diff --git a/dt-assets/js/details.js b/dt-assets/js/details.js index 748721cc74..381a1d2228 100644 --- a/dt-assets/js/details.js +++ b/dt-assets/js/details.js @@ -1,3 +1,6 @@ +/* +global ResizeObserver + */ 'use strict'; jQuery(document).ready(function ($) { let post_id = window.detailsSettings.post_id; @@ -1249,6 +1252,22 @@ jQuery(document).ready(function ($) { service.initialize(); window.componentService = service; } + + // When components are resized, re-layout the masonry grid + const targetElement = document.querySelectorAll('.grid .bordered-box .cell'); + let resizeTimeout; + const resizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + // many of these can be triggered on initial load, so debounce them with a timeout + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + window.masonGrid.masonry('layout'); + }, 100); + } + }); + for (let element of targetElement) { + resizeObserver.observe(element); + } }); // change update needed notification and switch if needed.