Attempting to integrate a responsive iframe within a dialog box has been quite the challenge. My initial approach, as seen in Fiddle 1, involved displaying an iframe upon button click, but unfortunately, it lacked responsiveness and failed to resize with the page.
I turned to the insights provided here, where I utilized CSS container styling to achieve responsive behavior for the iframe. By assigning a class to the iframe and setting the height to 120%, the display was clipped at the bottom as desired. You can view the updated version in Fiddle 2
Now, my aim is to transition this modified code into a jQuery dialog box. While the content remains responsive within the dialog, it appears that the iframe class is not being applied properly, resulting in the visible footer of the iframe display. This issue can be observed in Fiddle 3
The ultimate goal is to have the dialog box mirror the responsiveness seen in Fiddle 2 without displaying the iframe footer. Any suggestions or solutions would be greatly appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css>
<title>iframe</title>
<script src="//code.jquery.com/jquery-1.12.4.js></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js></script>
</head>
<body>
<button type="button" id="btn1>Button 1</button>
<div id="iFrameDiv" class="iframe-container">
<iframe style="display:none;" id="myframe1" src="https://app.powerbi.com/view?r=eyJrIjoiMjJlYTYwODktYjU2NS00ZjZiLTg1YTktNDRlZjgzNzFmN2U5IiwidCI6ImRjOWNhZGMxLTJhZTItNGM0YS04MzIwLThlOTViMDAzNGI5NiJ9" ></iframe>
</div>
</body>
</html>
$( "#myframe1" ).dialog({
autoOpen: false,
resizable: true
});
$( "#btn1" ).click(function() {
$( "#myframe1" ).dialog( "open" );
});
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 120%;
left: 0;
position: absolute;
top: 0%;
width: 100%;
}