Merge pull request #2450 from nhsuk/iframe-resize

Resize example iframes when contents changes size

Author: colinrotherham

CHANGELOG.md

@@ -1,5 +1,11 @@
 # NHS digital service manual Changelog
 
+## Unreleased
+
+:wrench: **Maintenance**
+
+- Resize example iframes when contents changes size
+
 ## 8.7.0 - 17 February 2026
 
 :new: **New features**

app/javascripts/design-example.mjs

@@ -20,6 +20,7 @@ export class DesignExample extends Component {
     this.closeButtons = this.$root.querySelectorAll('.app-button--close')
     this.copyButtons = this.$root.querySelectorAll('.app-button--copy')
     this.iframe = this.$root.querySelector('iframe')
+    this.state = { isMouseDown: false }
 
     this.bindEvents()
 
@@ -88,19 +89,21 @@ export class DesignExample extends Component {
     }
 
     if (this.iframe) {
-      initialize(
-        {
-          // Prevent resize when iframe has mouse cursor
-          // e.g. When resizing manually using handle
-          onBeforeIframeResize({ interactionState }) {
-            return !interactionState.isHovered
-          }
-        },
-        this.iframe
-      )
+      const { iframe, state } = this
+
+      iframe.addEventListener('mousedown', () => (state.isMouseDown = true))
+      iframe.addEventListener('mouseup', () => (state.isMouseDown = false))
+
+      initialize({ onBeforeIframeResize: () => this.isResizeAllowed() }, iframe)
     }
   }
 
+  isResizeAllowed() {
+    // Prevent resize when iframe has mouse down
+    // e.g. When resizing manually using handle
+    return !this.state.isMouseDown
+  }
+
   handleTabClick($tabLink) {
     const $tabParent = $tabLink.parentElement
     const index = $tabParent.dataset.index