Making iFrames Resizable

If you are using iframe deployment the default height and width of the iframe may be stifling. One option is to change the height and width of the iframe through styling. A more dynamic option is to make the iframe resizable using jQuery. You will need access to your webpage header to implement this feature.

Steps to make iframes resizable

Surround the iframe deploy code with a div with class “resizable”.

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

Copy and paste the following code into your webpage header.

<style>
.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%; resize:both; overflow:auto}
</style>

<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>
<script>
document.addEventListener('DataPageReady', function (event) {
$( ".content" ).resizable({
animate: true, animateEasing: 'swing', animateDuration: 500
});
});
</script>

  A small handle will appear in the bottom-right corner if the resizable attribute has been correctly implemented. You can apply this resizable class to other HTML objects including images and text areas. This sample implementation shows the resizing with dashed gray helper box and an animation as the iframe resizes. If you want to resize the iframe directly (without the animation) you can remove this line from the sample code above.

animate: true, animateEasing: 'swing', animateDuration: 500