For background context, I’ve been successfully able to create an iframe that is scrollable but not clickable by following this thread. Currently I use a magic number of 1000vh to display the entire google doc.

However, I’m trying to figure out how to set the iframe so that it will dynamically become only the shortest length necessary to cover the whole page, and leave no whitespace at the bottom (e.g. 500vh, 750vh, etc). I’m implementing this as a Custom Component in Retool.

I’ve figured the easiest approach was using React code to **dynamically update the iframe height CSS attribute of the iframe. **However, I can’t figure out how to (a) determine and calculate what the vertical length of the Google Doc is, and (B) update that iframe height attribute accordingly.

I’ve also tried, to no avail:

• Putting 100% as the iframe height. It does fix the height issue, but then my iframe becomes clickable.
• Using an invisible div on top of the iframe. (ChatGPT’s recommendation)

For context, the code below is my working base code with the 1000vh magic number. It creates a scrollable but not clickable iframe.

<style>
  div {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }
  
  iframe {
    width: 100%;
    height: 1000vh;
    pointer-events: none;
  }
</style>

<!-- You can add any HTML/CSS/JS here. UMD versions are required.
Keep in mind that Custom Components are sensitive to bundle sizes, so try using a
custom implementation when possible. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="react"></div>

<script type="text/babel">
  // Function to create the iframe element
  function createIframe(fid) {
    return <iframe src={`https://docs.google.com/document/d/${fid}/edit?usp=sharing`}></iframe>;
  }

  // Function to create the div element containing the iframe
  function createDiv(fid) {
    return <div>{createIframe(fid)}</div>;
  }

  // Main React component
  const MyCustomComponent = ({ model }) => {
    
    return createDiv(model.fid);
  }

  // This is the entrypoint for the React component.
  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent)
  const container = document.getElementById('react')
  const root = ReactDOM.createRoot(container)
  root.render(<ConnectedComponent />)
</script>