Contrib.social

VH units fix only works for inline styles

Open on Drupal.org →
Created on 24 July 2024, 9 months ago

Overview

In in useSyncIframeHeightToContent.ts

// Apply a max-height to elements with vh units in their height - otherwise an infinite loop can occur where a component's
          // height is based on the height of the iFrame and the iFrame's height is based on that component leading
          // to an ever-increasing iFrame height!
          const elements: NodeListOf<HTMLElement> =
            iframeHTML.querySelectorAll('*');
          elements.forEach((element: HTMLElement) => {
            if (element.style.height.endsWith('vh')) {
              const vhValue = parseFloat(element.style.height);
              const newHeight = (vhValue / 100) * height;
              element.style.maxHeight = newHeight + 'px';
              resizeIframe();
            }
          });

This is very useful as it allows the use of vh units to style components without screwing up the iframe styling. However, this only works for inline styles, so this will need to work for stylesheet-applied vh-heights as well (likely the more common scenario).

Proposed resolution

User interface changes

🐛 Bug report
Status

Active

Component

Page builder

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024