How can I make an iframe resizable?

Asked 14/11, 2011 at 5:43 Answered 22/3, 2020 at 18:41

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?

Leilaleilah answered 14/11, 2011 at 5:43 Comment(5)

in which container you are opening iframe? even better you can put some piece of you code to get better answer.. – Mickel 14/11, 2011 at 5:49

i tried to use div, but it didn't work, what do you mean container? sorry i am new to this kind of coding, please bear with me. Thanks – Leilaleilah 14/11, 2011 at 5:53

Have you ever tried with jquery? – Mickel 14/11, 2011 at 5:59

yes, actually, when I used jQuery code which is .resizable();, it worked but since the iframe is within the div tag, the src attribute of the iframe is not resizable, only the div. – Leilaleilah 14/11, 2011 at 6:2

can figure out how to not make it blow up to the full browser size? – Arbuckle 27/7, 2018 at 14:43

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.

Erlanger answered 23/10, 2014 at 21:3 Comment(7)

Does this solution still work? I have no luck with it. – Greff 31/5, 2016 at 2:40

@AndrewThreadgill This solution worked for me in Chrome 51. Are you seeing something different than what is presented in Nicole's support link? – Cheka 17/6, 2016 at 17:7

I believe it is because I am using an external site in my iframe. – Greff 17/6, 2016 at 19:21

I tested with an iframe[srcdoc] created via iframify: works with Chr 54 (where it can grow but not shrink, +1) but not Fx 49 :( Related request feature on Bugzilla@Mozilla – Grandfather 9/11, 2016 at 9:25

This works for Chrome and Safari. Does not work for Internet Explorer, Edge or Firefox (even though Firefox does support the resize property). – Handbag 1/11, 2018 at 15:56

There's an open bug for Firefox about this bugzilla.mozilla.org/show_bug.cgi?id=680823 – Blackmarket 1/2, 2019 at 22:20

Thanks to the new flexbox-feature there now is a pure-CSS-solution which works for Firefox and Chrome. – Symonds 22/3, 2020 at 18:47

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.

Symonds answered 22/3, 2020 at 18:41 Comment(2)

Thank you, this really works. Is there something similar for draggability? – Carpet 19/1, 2021 at 16:1

@Carpet IMHO not this easy. AFAICS dragging needs JavaScript (to receive the drag). As IFRAMEs are interactive and receive all mouse events (like drag), you need something outside the IFRAME's control (some additional drag-DIV). From JavaScript, drags of this drag-DIV then can be applied to the the resizer-DIV accordingly to simulate dragging. If the drag-DIV is made to (transparently) cover the whole IFRAME and is (in z-order) in front of the IFRAME, it can receive all the mouse events before the IFRAME (but you cannot interact with the IFRAME in that situation). – Symonds 21/1, 2021 at 11:33

These steps will make an iframe resizable:

Create a div for resizing. eg:
```
<div class="resizable"></div>
```

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%;
}

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>

Execute Resizable

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

Dari answered 14/11, 2011 at 6:41 Comment(2)

$(".resizable").resizable({ ... imateDuration: 500}); should be animateDuration – Diacid 22/1, 2015 at 20:54

If you only need resizable panes, adding jQuery UI might be overkill, but it is a nice library indeed. – Schall 19/2, 2015 at 14:9

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.

Immersionism answered 28/3, 2014 at 18:0 Comment(2)

+1 cant believe this is the only barrier solution and it didnt have any votes! this is a big deal for not "losing" track of the mouse when dragging too quickly over another iframe. thanks @Brilliand! – Spitzer 17/12, 2015 at 21:49

@happytimeharry I didn't actually solve the problem for multiple iframes interfering with each other - the barrier in my answer only prevents the one iframe from interfering with its own resizing. – Immersionism 17/7, 2017 at 17:28

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

Penmanship answered 31/12, 2011 at 8:50 Comment(0)

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});
        }
    });
});

Mickel answered 14/11, 2011 at 6:15 Comment(1)

It still didn't work out, my previous code was better :( thanks though – Leilaleilah 14/11, 2011 at 6:44

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.

Prevailing answered 14/11, 2011 at 6:4 Comment(2)

<div class="demo"><iframe src="xxxx.com/xxxx/xxxx.php" name="xxxx" id="xxxx" style="border:0px;frameborder:0px;visibility:hidden;" style="border:1; top:0; left:0; right:0; height:100%; width:100%"></iframe></div> – Leilaleilah 14/11, 2011 at 6:19

but it still didn't work, the only part that is resizable is the <div> part – Leilaleilah 14/11, 2011 at 6:20

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/

Kielty answered 23/1, 2014 at 12:18 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags