If you ever come across those combination, you’ll know where this post will lead.
Whether we fire the dialog on the iframe element, the contained iframe in the dialog will adjusted it’s width to ‘standard’ 150px regardless the dialog’ width and iframe’ width setting. To put it another way, you call dialog to show in 300px but the iframe contained only fill half of the dialog and leaving plain blank on the rest.
It’s been a pain to be in the situation but you really have to use those combination. I’ve been tinkering with it with no luck and luckily my hunch lead to the solution.
The key is to resize the iframe to fill the margin AFTER the dialog opened. Put it at the open event of the dialog.
$("#theiframe").dialog({
bgiframe: true,
modal: true,
width:600,
height:480,
close: function(event, ui) { $(this).dialog('destroy') },
open: function (event,ui) {$(this).css("width","100%")}
});
}
That should do the trick!
