How can I make an iframe resizable?

Question

We have this group project and I was assigned to make a certain iframe resizable. I've been reading lots of forum posts since last week, and I found out that iframe itself can't be resizable.

Is there a way to make my iframe resizable?

Answer 1

This can be done in pure CSS, like so:

iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}

Set the height and width to the minimum size you want, it only seems to grow, not shrink.

Live example: https://jsfiddle.net/xpeLja5t/

This technique has good support in all major browsers except IE.

Answer 2

It took more than 1 hour to find something which led me to a working solution:

• Pure CSS as it should be
• For all modern browsers with full flexbox support, like Firefox, Chrome, etc.
• Does not work for older browsers like IE10 and below, though

.resizer { display:flex; margin:0; padding:0; resize:both; overflow:hidden }
.resizer > .resized { flex-grow:1; margin:0; padding:0; border:0 }

.ugly { background:red; border:4px dashed black; }

<div class="resizer ugly">
  <iframe class="resized" src="https://wikipedia.org/"></iframe>
</div>

In Chrome this solution still has some issues at my side. Use Run code snippet and then Full Page (so it does not seem to work if the IFRAME is embedded in other IFRAMEs). Also the resize handle (in the right bottom corner) is shown a bit subtle, and resizing often stops to follow the mouse.

In Firefox you can resize the iframe now using pure CSS, too.

Wikipedia was the only URL I found which has no CSP against iframe-embedding yet. If they ever add one, the iframe becomes empty and your Browser's console will log the CSP error. In this case, please update my answer with some working URL. Thanks.

Answer 3

These steps will make an iframe resizable:

1. Create a div for resizing. eg:

   <div class="resizable"></div>
   

2. Apply the style tag for style of div.

   .ui-resizable-helper {
       border: 1px dotted gray;
   }
   .resizable {
       display: block;
       width: 400px;
       height: 400px;
       padding: 30px;
       border: 2px solid gray;
       overflow: hidden;
       position: relative;
   }
   iframe {
       width: 100%;
       height: 100%;
   }
   

3. Include jQuery & jQuery UI

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"rel="stylesheet" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   

4. Execute Resizable

   $(function () {
       $(".resizable").resizable({
           animate: true,
           animateEasing: 'swing',
           animateDuration: 500
       });
   });
   

Answer 4

With jQuery UI...

HTML:

<div class="resizable" style="width: 200px; height: 200px;">
    <iframe src="http://www.example.com/" style="width: 100%; height: 100%;"></iframe>
</div>

JavaScript:

$(".resizable").resizable({
    start: function(event, ui) {
        ui.element.append($("<div/>", {
            id: "iframe-barrier",
            css: {
                position: "absolute",
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                "z-index": 10
        }
        }));
    },
    stop: function(event, ui) {
        $("#iframe-barrier", ui.element).remove();
    },
    resize: function(event, ui) {
        $("iframe", ui.element).width(ui.size.width).height(ui.size.height);
    }
});

jsFiddle: http://jsfiddle.net/B5vHQ/97/

Explanation:

Since jQuery UI's resizable plugin won't work on an iframe directly, wrap the iframe in a div and resize the div instead. The resize event in the code above ensures that the iframe resizes to match the div.

There's an additional problem with this method, however - iframes don't pass mouse movement events to their parent element. To work around that, the start and stop events cover the iframe up with another element during the resize, so that the resizable plugin can track mouse movement correctly.

For some reason, giving the wrapper div an explicit size is necessary for the resizing to work. In most cases, that means that the iframe needs the same size set, so thatit matches the size of the div right from the start.

Answer 5

In case you haven't found the solution yet, I've had success with:

Jquery:

$("#my-div-frame-wrapper").resizable({
    alsoResize : '#myframe'
});

HTML:

<div id="my-div-frame-wrapper">
    <iframe id="myframe"></iframe>
</div>

I hope it helps

Answer 6

I found your solution:

HTML:

<div id="resizable" class="ui-widget-content" 
     style="border-style:solid; height:400px; width:400px">
    <h3 class="ui-widget-header">Resizable</h3>
    <iframe src="test.aspx" id="myfr" scrolling="no"
            frameborder="0" marginheight="0" marginwidth="0" >
        Your Browser Do not Support Iframe
    </iframe>
</div>

JQUERY:

$(function() {
    $("#resizable").resizable();

    $("#resizable").resizable({
        resize: function(event, ui) {
            $("#myfr").css({ "height": ui.size.height,"width":ui.size.width});
        }
    });
});

Answer 7

The best solution I've found is to set the width and height of the iframe to 100% and put the iframe within a div tag. This is the basic solution you see with tools like CKEditor.

For an example, I have some jQuery dialogs that do just that on the Utah's Disclosures Site. If you click on a report or statement of or, you'll see a dialog that pops up with an iframe in it. Hope it helps.

Answer 8

very easy,

first -

add jquery and jquery-ui -

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

then -

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

last -

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

Its done!

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>

form http://jqueryui.com/resizable/