iFrame has fixed width of 300px, without any styling defining 300px

Question

I'm using the iframe-resizer package to dynamically change the size of an iframe depending on content.

However, before even trying any dynamic resizing, I run into an issue with the basic iframe: it's always 300px in width. Whatever content I place inside the iframe, the width is always 300px. Will not move; overflow is hidden if I add something >300px and still takes up 300px if my content is smaller than that.

EDIT: To be clear, My problem is that I want to dynamically change the width of an iframe (cross-domain), but it always renders at 300px and will not change. I'm using the iframe-resizer package to successfully dynamically change the height, but that's nto working on the width.

In the parent site, I'm embedding the iframe as follows:

<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js">
</script>
<script type="text/javascript">
    var i = new URLSearchParams(window.location.search).get("openWidget"); document.write('<iframe id="inlineFrameExample" title="Inline Frame Example" style="position: fixed; zIndex: 1000; bottom: 0; right: 0" frameBorder="0" scrolling="no" src="http://localhost:3001?openWidget=' + i + '"></iframe>');
    window.iFrameResize({ log: true }, '#inlineFrameExample')
</script>

And the content in my for my framed site, I have the following elements and styling:

    <div className="App" id="App2">
      {openWidget && <div className="button">OK</div>}
      {showMessage && <section>This is a message</section>}
      <div>
        <button className="button" onClick={() => setShowMessage(!showMessage)}>
          Msg
        </button>
        <button className="button" onClick={() => setOpenWidget(!openWidget)}>
          {openWidget ? "-" : "+"}
        </button>
      </div>
    </div>

.App {
  text-align: center;
  float: right;
}

.container {
  display: flex;
  justify-content: flex-end;
  float: right;
}

section {
  background-color: mediumseagreen;
  color: white;
  width: 500px;
}

.button {
  width: 100px;
  height: 100px;
  background-color: mediumseagreen;
  color: white;
  text-align: center;
  float: right;
}

Note that there's nothing in there about width being 300px. There are other widths, but the iframe seems to ignore them and always set itself to 300px.

I also made two code sandboxes, and embedded one site in the other via an iframe. Unfortunately the iframe is hidden for some reason, but if you inspect and look for the iFrame with id="inlineFrameExample" (and not code sandbox's button iframe) you'll see it's 300px wide: https://exzts.csb.app/ The code for the parent site is here: https://codesandbox.io/s/eloquent-flower-exzts?file=/index.html The code for the framed site is here: https://codesandbox.io/s/iframe-test-ss8fs

UPDATE: I also removed all css styling from both the parent site and the framed site. Still always stuck at 300px. I also viewed the CSS specs which says default will be default set to 300px under certain conditions, but I cannot figure out how to dissatisfy those conditions so that the 300px rule doesn't apply.

I want the iframe to resize based on width. The current set up works perfectly on height, and I understand there's something in the default specs for iframes that sets them to 300px if x conditions are met: w3.org/TR/CSS2/visudet.html#inline-replaced-width What I need is whatever styling/setting/attribute will disable this, so the width will act in the same way as the height (i.e. completely dynamic).

Answer 1

The iframe-resizer doesn't resize iframe width by default. You have to explicitly specify it using sizeWidth setting.

window.iFrameResize({
  log: false,
  sizeWidth: true,
  checkOrigin: false,
  widthCalculationMethod: "rightMostElement",
  heightCalculationMethod: "lowestElement"
}, "#myFrame");

body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js"></script>

<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/"></iframe>
<span>😵😜🤪</span>

The iframe content is animated so it affects iframe's width and height according to the specified width and height calculation methods. And the iframe-resizer updates dimensions on every animations start and end event.
Also, the iframe source is from codesandbox and the parent document is this StackOverflow answer page, so we need to set checkOrigin: false as well.

Note: Had to set log: false because the animations are happening very fast creating ton of logs in console.

---

You can provide your own size calculations form inside the iframe.ref:

    <script>
      window.iFrameResizer = {
        widthCalculationMethod: function () {
          return document.querySelector(".one").clientWidth;
        }
      };
    </script>

In following demo the iframe resizes exactly to the width of green box.

window.iFrameResize({
  log: false,
  sizeWidth: true,
  checkOrigin: false,
  widthCalculationMethod: "rightMostElement",
  heightCalculationMethod: "lowestElement"
}, "#myFrame");

body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js"></script>

<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/custom.html"></iframe>
<span>😵😜🤪</span>

Refer implementation of custom.html for better understanding. You can implement similar method for heightCalculationMethod.