如何使用iframe正确调整jQuery.ui对话框的大小

Question

当我打开具有预定义大小(例如,800x600)的jQuery对话框时,对话框中的iframe未正确调整大小.看起来它有默认大小.事实上,高度还可以,但宽度似乎无缘无故地保持在300px.

我正在创建iframe和对话框,如下所示:

someVar = '<iframe id="some-dialog" class="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);

我已经尝试在init调用中设置宽度和高度,结果是一样的.如果省略这两个,则使用默认值初始化对话框,然后调整大小可以正常工作.

任何想法都有帮助......

更新:

我已将iframe包装在div中,然后使用标准调用创建对话框:

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

不是一个真正的解决方案,但它的工作原理......(虽然感觉很脏!)

Answer 1

我通过向IFrame添加几个样式来解决它:

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