My current challenge involves utilizing the iframe-resizer package to adjust the size of an iframe dynamically based on its content.
However, even before attempting any dynamic resizing, I encounter a fundamental issue with the basic iframe: it stubbornly remains consistent at a width of 300px. Regardless of the content inserted into the iframe, it steadfastly maintains a width of 300px. It neither adjusts nor overflows; if content exceeds 300px, it is hidden, and if it is smaller, the iframe still occupies 300px.
EDIT: To clarify, my dilemma revolves around desiring to alter the width of a cross-domain iframe dynamically, but it constantly displays at 300px without alteration. While I have successfully managed dynamic height adjustments using the iframe-resizer package, the same approach does not seem to apply to width changes.
In the parent site, I embed the iframe in this manner:
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f39ac5c1d0dcc49ca3bfbdd1ccc4c799e2ecff">[email protected]</a>/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>
Within the content of my framed site, I implement the following elements and styles:
<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;
}
Please note that there are no specifications enforcing a 300px width within this code block. Other widths are defined, but the iframe seems to disregard them entirely, remaining fixed at 300px.
I also created two code sandboxes and embedded one site within the other via an iframe. Regrettably, the iframe is concealed for unknown reasons, but upon inspection seeking the iFrame with id="inlineFrameExample" (disregard CodeSandbox's button iframe), you will observe that it indeed retains a width of 300px: The source code for the parent site can be accessed here: https://codesandbox.io/s/eloquent-flower-exzts?file=/index.html And for the framed site, follow this link: https://codesandbox.io/s/iframe-test-ss8fs
UPDATE: Despite removing all CSS styling from both the parent and framed sites, the 300px width constraint persists. Reference to the CSS specifications reveals default conditions under which the width defaults to 300px. However, I am unable to ascertain how to bypass these conditions to prevent the application of the 300px rule.
The ultimate objective is to enable the iframe to resize proportionate to its width. The existing setup functions flawlessly with regards to height adjustment, yet a similar resolution for width elasticity remains elusive due to certain inherent constraints pertaining to iframes: w3.org/TR/CSS2/visudet.html#inline-replaced-width What I seek is guidance on what styling or attribute could subvert these restrictions, allowing the width to behave with the same fluidity as the height (completely dynamic).