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

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