What are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

Question

What are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

I have a sandbox from Material UI that you can view at this link: https://codesandbox.io/s/material-demo-forked-c8e39?file=/demo.js

Upon loading the page, an iframe displays some HTML content. Although the width fits perfectly, there are two vertical scrollbars visible. Is there a way to remove the outer scrollbar and dynamically adjust the height of the HTML content to show only one scrollbar if needed?

Thank you!

import React, { useEffect } from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import Paper from "@material-ui/core/Paper";

const drawerWidth = 240;

javascript css reactjs iframe material-ui

Answer 1

Answer №1

To ensure that the content fits properly within the outer div, adjust it vertically outside the iframe. You can try reducing the vh of the outer div for a better fit. Once the outer div is adjusted correctly to fit vertically, the outer scrollbar will disappear.

If you wish to hide the outer scrollbar forcefully, you can refer to this link

Answer 2

To ensure that the content fits properly within the outer div, adjust it vertically outside the iframe. You can try reducing the vh of the outer div for a better fit. Once the outer div is adjusted correctly to fit vertically, the outer scrollbar will disappear.

If you wish to hide the outer scrollbar forcefully, you can refer to this link

Answer 3

Answer №2

To solve this issue easily, adjust the full screen height for div#root by setting it to

style={{ height: "100vh" }}

and update the parent's height for the iframe as follows:

  <Paper elevation={1} style={{ height: "90%" }} flex={1} overflow="auto">
    <iframe
      id="widget"
      name="widget"
      title="widget"
      ...

You can view the codesandbox example through this link:

https://codesandbox.io/s/material-demo-forked-2gtyz?fontsize=14&hidenavigation=1&theme=dark

Answer 4

To solve this issue easily, adjust the full screen height for div#root by setting it to

style={{ height: "100vh" }}

and update the parent's height for the iframe as follows:

  <Paper elevation={1} style={{ height: "90%" }} flex={1} overflow="auto">
    <iframe
      id="widget"
      name="widget"
      title="widget"
      ...

You can view the codesandbox example through this link:

https://codesandbox.io/s/material-demo-forked-2gtyz?fontsize=14&hidenavigation=1&theme=dark

Answer 5

Answer №3

An iframe is unable to resize itself autonomously in order to prevent advertisers from enlarging their ads on web pages without permission.

Therefore, it is the responsibility of the parent element to determine and set the height of an iframe. One way to achieve this is by directly reading the content's height within the iframe and adjusting its height accordingly with the following approach:

const iframeRef = React.createRef();
const [iframeHeight, setIframeHeight] = React.useState('100%');

React.useEffect(() => {
  setIframeHeight(`${iframeRef.current.contentWindow.document.documentElement.scrollHeight}px`);
}, []);

const iframeRef = React.createRef();

<iframe
  ref={iframeRef}
  id="widget"
  name="widget"
  title="widget"
  scrolling="yes"
  frameBorder="0"
  width="100%"
  height={iframeHeight}
  srcdoc={html}
  style={{ position: "relative", height: iframeHeight }}
></iframe>

If the height of the iframe is subject to change due to asynchronous operations or user interactions, messages must be sent from the iframe to its parent using Window.postMessage when the height changes. These messages should include the updated height. Subsequently, an event listener for the message event needs to be added to the parent element to adjust the iframe's height accordingly.

Answer 6

An iframe is unable to resize itself autonomously in order to prevent advertisers from enlarging their ads on web pages without permission.

Therefore, it is the responsibility of the parent element to determine and set the height of an iframe. One way to achieve this is by directly reading the content's height within the iframe and adjusting its height accordingly with the following approach:

const iframeRef = React.createRef();
const [iframeHeight, setIframeHeight] = React.useState('100%');

React.useEffect(() => {
  setIframeHeight(`${iframeRef.current.contentWindow.document.documentElement.scrollHeight}px`);
}, []);

const iframeRef = React.createRef();

<iframe
  ref={iframeRef}
  id="widget"
  name="widget"
  title="widget"
  scrolling="yes"
  frameBorder="0"
  width="100%"
  height={iframeHeight}
  srcdoc={html}
  style={{ position: "relative", height: iframeHeight }}
></iframe>

If the height of the iframe is subject to change due to asynchronous operations or user interactions, messages must be sent from the iframe to its parent using Window.postMessage when the height changes. These messages should include the updated height. Subsequently, an event listener for the message event needs to be added to the parent element to adjust the iframe's height accordingly.

Answer 7

Answer №4

When generating the HTML code, make sure to make adjustments in the <script> tag by adding the resizeIframe function and calling that function at the end of the document ready event:

        <script>
          function resizeIframe()
          {
            var document = window.parent.document;
            var iframe = document.getElementById('widget');
            iframe.style.height = (iframe.contentWindow.document.documentElement.scrollHeight + 18) + 'px';
          }

          var my_jquery = $.noConflict(true);
          my_jquery(document).ready(function(){
            my_jquery('#jEZeucEZQISp').DataTable({
              data: [["Alabama","Montgomery","https://en.wikipedia.org/wiki/Montgomery,_Alabama","TRUE"],["Alaska","Juneau","https://en.wikipedia.org/wiki/Juneau,_Alaska","TRUE"], ...],
              iDisplayLength:  25 ,
              "scrollX":      true,
              scrollY:        '',
              scrollCollapse:  false ,
              search: {
                search: "",
              },
            });
            resizeIframe();
            my_jquery(window.parent).on('resize', resizeIframe);
          });
        </script>

Afterwards, update your <IFRAME> tag as follows:

          <iframe
            id="widget"
            name="widget"
            title="widget"
            scrolling="auto"
            frameBorder="0"
            width="100%"
            srcDoc={html}
            style={{ position: "relative"}}
          ></iframe>

Check it on sandbox

Answer 8

When generating the HTML code, make sure to make adjustments in the <script> tag by adding the resizeIframe function and calling that function at the end of the document ready event:

        <script>
          function resizeIframe()
          {
            var document = window.parent.document;
            var iframe = document.getElementById('widget');
            iframe.style.height = (iframe.contentWindow.document.documentElement.scrollHeight + 18) + 'px';
          }

          var my_jquery = $.noConflict(true);
          my_jquery(document).ready(function(){
            my_jquery('#jEZeucEZQISp').DataTable({
              data: [["Alabama","Montgomery","https://en.wikipedia.org/wiki/Montgomery,_Alabama","TRUE"],["Alaska","Juneau","https://en.wikipedia.org/wiki/Juneau,_Alaska","TRUE"], ...],
              iDisplayLength:  25 ,
              "scrollX":      true,
              scrollY:        '',
              scrollCollapse:  false ,
              search: {
                search: "",
              },
            });
            resizeIframe();
            my_jquery(window.parent).on('resize', resizeIframe);
          });
        </script>

Afterwards, update your <IFRAME> tag as follows:

          <iframe
            id="widget"
            name="widget"
            title="widget"
            scrolling="auto"
            frameBorder="0"
            width="100%"
            srcDoc={html}
            style={{ position: "relative"}}
          ></iframe>

Check it on sandbox

What are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Pausing a running function in React

Is it possible to transfer a specific feature from jQuery to Prototype?

Vue.js: click event does not trigger transform animation

Having trouble unselecting the previous item when selecting a new item in Reactjs

How can I access the parent elements within a recursive directive?

Using JavaScript to generate dynamic folders in Alfresco is not functioning as expected

What is the best way to automatically create a PDF file that includes interactive JavaScript charts?

"Mastering the art of event delegation: A guide to effectively engaging with various

Troubles with retrieving Array data for a JavaScript column chart

Tracking mouse movement: calculating mouse coordinates in relation to parent element

Utilize Material-UI function by passing a function as an argument

When an attempt to make a POST request using fetch() is made, a TypeError: Failed to fetch error is immediately thrown instead of

pretending to make an ajax call using jQuery

Hovering over the child element, instead of the parent

Steps to update the color of the asterisk in a mandatory field: How to change the

Aligning an SVG icon at the center of a button

Customizing Body Color in CKEditor for Dynamic Designs

Issue with module exports not being defined in IE11/Edge

Having issues with ng-repeat not displaying any content

Generate dynamic DIV elements and populate them with content