Resize of row/column is not working when Split() is included directly in html (instead of separate script)

[abhijithda]

Resize of row/column is not working when below Split() is included directly in html with <script> tags, whereas it works perfectly fine when included as part separate js file.

Resize doesn't work when Split() is included in html within <script> tags

Example: https://jsfiddle.net/uca6wh0o/

<script>
  Split({
    columnGutters: [{
      track: 1,
      element: document.querySelector('.vertical-gutter'),
    }],
    rowGutters: [{
      track: 1,
      element: document.querySelector('.horizontal-gutter'),
    }]
  })

</script>

<div class="grid">
  <div>
    HTML
  </div>
  <div>
    CSS
  </div>
  <div>
    JS
  </div>
  <div>
    Result
  </div>
  <div class="horizontal-gutter">
  </div>
  <div class="vertical-gutter">
  </div>
</div>

Resize works when Split() is part of js

https://jsfiddle.net/oskar/rcqkox3t/

[jy14898]

In the HTML case, your script is running before the elements have been created. To illustrate this, add console.log(document.querySelector('.vertical-gutter')); somewhere in the script tag