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

发布于 2024-09-08 18:34:25 字数 894 浏览 2 评论 0原文

当我打开具有预定义大小（例如 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
    })

不是真正的解决方案，但它有效。 ..（虽然感觉很脏！）

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光沙漏 2024-09-15 18:34:25

我通过向 IFrame 添加一些样式解决了这个问题：

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

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;
}

回复收藏 0 原文

冷月断魂刀 2024-09-15 18:34:25

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

编辑：
也许我不明白你的意思。无论如何，请检查
演示：

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:

回复收藏 0 原文

~没有更多了~