Question

I want to display and iframe into a jquery ui dialog. This iframe needs to be resized according to the desired user’s dialog size. The dialog should occupie all the dialog’s space but the title (top) nor the resize button (bottom right).

jQuery(document).ready(function(){
    jQuery("<div id ='container'><iframe src='http://www.google.com'></iframe></div>").dialog({modal:true,title:"Title",width:800,height:600});
});

​
Any idea? I’m becoming mad with the css widths and heights.

Answer 1

Please try this working demo http://jsfiddle.net/xyctR/18/

Iframe will populate with jsfiddle and rest you can see the behavior.

Hope this helps,

Following code will suffice your need i.e. “needs to be resized according to the desired user’s dialog size. The dialog should occupie all the dialog’s space but the title (top) nor the resize button”

Code

function showDialog(url){
   var iframe = $('<iframe id="modalIframeId" width="100%" height="100%" src='+url+' marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title">Your browser does not support</iframe>')
    .on('load', function() {
        console.log('loaded');
    });

    $("#divId")
        .append('<div id="loading">Loading....</div>')
        .append(iframe)
        .dialog({modal:true,title:"Title",width:800,height:600});
}

showDialog('http://jsfiddle.net');

​**image**