Option for iFrame to automatically calculate height

Created on 10 January 2019, almost 6 years ago
Updated 30 August 2024, 3 months ago

The iFrame can be a bit awkward as it was in my situation. You can set a percentage width and fixed height, but it's going to stay like that no matter the content. You can either have some unnecessary empty space or you could have scrollbars within the iFrame which is not exactly the best UX, especially when on mobile devices where scrollbars are initially hidden.

A proposed solution is to provide an option in the display configuration pane of the iFrame to automatically calculate the iFrame height based on its content.

The initial patch provides this option.

Feature request
Status

Needs review

Version

2.0

Component

Display plugins

Created by

🇸🇮Slovenia jzavrl

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India gouthamraon

    Getting Console error after applying #67 patch, Null value in "iframe.contentWindow".
    We need to add a condition for this.

    // Resize iFrame based on content (called from iframe onload).
    function resizeIframe(iframe) {
    // Remove default height so we're not calculating from that.
    iframe.style.height = '';
    // Set height to content.
    iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
    // Periodically auto-resize as contents may change.
    setInterval( function () {
    if(iframe.contentWindow == null) return;
    iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
    }, 1000);

  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 7.3 & MariaDB 10.3.22
    last update about 1 year ago
    56 pass
  • 🇦🇺Australia thtas

    I've not run in to the issue from #68, but I do have a problem when uploading a large image when the browser window is not very high, resulting the modal being resized and the bottom of it gets hidden below the fold. Making the button at the submit button un-clickable. To fix it you have to re-size the window (by just a tiny amount) and the modal position is re-calculated correctly.

    I've added a resize event trigger to the resizeIframe method which fixes it for my use-case, but this whole thing is pretty stinky. use at your own risk.

  • added small validation to prevent errors

  • 🇮🇳India dev16.addweb

    Re-roll the patch #70 according to the latest code changes.

  • 🇺🇸United States sonfd Portland, ME

    It seems like we diverged from the original track somewhere here, starting at around #63 the patches are all much smaller and simpler, but they seem incomplete. For example, they do not adjust the configuration form with the auto-height option and they always resize the iframe regardless of which height was configured. As a result, I think the patches from the #53 -> #57 -> #62 line are more complete. I'm attaching a re-roll of that patch against the latest dev.

  • 🇺🇸United States sonfd Portland, ME

    Hiding the older iterations of patches so only the latest patches of each line are visible:

    1. Patch #72, from the original patch line, everything from before #62
    2. #71, from the newer, simpler patch line, from #63 to #71
Production build 0.71.5 2024