how to properly size jQuery.ui dialog with an iframe

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" clas开发者_StackOverflow中文版s="window-frame" src="http://example.com/"></iframe>';

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!)

I solved it by adding few styles to the IFrame:

iframe#some-dialog {
    width: 100% !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

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

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: