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

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 2

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 3

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 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

Please follow the these step for Iframe resizeable:

1. Create a div for resizeable. 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',
           imateDuration: 500
       });
   });