Embedded content does not fully load

When embedded content does not correctly load in blocks that show or hide content such as in the Tabs, Carousel or Accordion block, you would need to add JS scripts for it to load.

There are two scenarios in which you can add the JS scripts:

1. Multiple Columns

The JS scripts will apply to all multiple columns to the page. Add Custom HTML block in the page where the block is present, then add the code below.

Make sure the Custom HTML block is the last block on the page.

<script>
let resizeTimeout = null
function triggerResize() {
  clearTimeout( resizeTimeout )
  resizeTimeout = setTimeout( () => {
    window.dispatchEvent(new Event('resize'));
  }, 50);
}
const ro = new ResizeObserver(triggerResize)
const columns = document.querySelectorAll(".stk-block-column");
columns.forEach( el => ro.observe(el) )
</script

2. Specific Column

Add Custom HTML block in the page where the block is present, then add the code below. Make sure the Custom HTML block is the last block on the page.

<script>
function triggerResize() {
  setTimeout( () => {
    window.dispatchEvent(new Event('resize'));
  }, 50);
}
const column = document.querySelector(".stk-123456"); // Replace with the unique class of the tab container
new ResizeObserver(triggerResize).observe(column)
</script>