A new way to listen for form height changes

This site is best viewed in a modern browser with JavaScript enabled.

A new way to listen for form height changes

jamieburchell

Long time user of MachForm here.

I wanted to share a new way of listening for changes in the height which will also work when a user resizes their browser, changes orientation on their device or triggers an action that adds or removes fields from the form. It might be of interest to you.

In view_functions.php we replaced this:

<script type="text/javascript">
    $(function(){
    	$.postMessage({mf_iframe_height: $('body').outerHeight(true)}, '*', parent );
    });
</script>

With this:

<script type="text/javascript">
	(new ResizeObserver(function(e) {
		$.postMessage({mf_iframe_height: e[0].target.offsetHeight}, '*', parent );
	})).observe(document.documentElement);
</script>

It will listen for changes in height to the HTML element (document.documentElement). I chose the HTML element and not the BODY element, just because this code is included before the BODY element is available.

It also means that you don't have to keep posting the message in other places where you think it could be needed. You can set it up once and not need to worry about it again.

Browser support is pretty good, if you don't care about IE11: https://caniuse.com/?search=ResizeObserver

Anyway, thought I'd share!

Thanks,
Jamie