how to properly size jQuery.ui dialog with an iframe

Question

When I open a jQuery dialog with a predefined size (say, 800x600), the iframe within the dialog is not resized properly. It appears like it has the default size. In fact, the height is OK, but width seems to stay at 300px for no reason.

I'm creating the iframe and dialog like this:

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"&gt;&lt;/iframe&gt;';

someVar.dialog
    ({
        title: command.buttonText,
        autoOpen: false,
        modal: false,
        resizable: true
    })
    .dialog('option', 'width', 800)
    .dialog('option', 'height', 600);

I've tried putting the width and height in the init call, the result is the same. If I omit those two, the dialog is initialized with default values and subsequent resizing works fine.

Any ideas would help...

Update:

I've wrapped the iframe in a div and then created the dialog with a standard call:

someVar.dialog
    ({
        title: command.buttonText,
        autoOpen: false,
        modal: false,
        resizable: true,
        width: 800,
        height: 600
    })

Not a real solution but it works... (it feels dirty though!)

Answer 1

  someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"&gt;&lt;/iframe&gt;';

someVar.dialog
    ({
        title: command.buttonText,
        autoOpen: false,
        modal: false,
        resizable: true,
        width:800,
        height:600
    }).width(800-10).height(600-10);

Edit: Maybe I do NOT understand what you mean correctly.Anyway,plz check
Demo: