Question

我有一个带有html的模态对话框（window.showModalDialog）。当我调整对话框的大小时，其中的HTML不会考虑新的边界，并且我得到的滚动条或元素不会100％扩展到新的宽度。

为了解决这个问题，我必须将它拖动一段时间，然后将它自动回到正确的尺寸。

以编程方式修复它。我执行以下window.document.getElementById('removeMainBody').innerHTML =window.document.getElementById('removeMainBody').innerHTML;

但这会导致html中的某些动态对象停止运行。

在调整对话框大小后，如何解决此问题并使对话框中的元素调整大小？

这是我的代码

 else if(<c:out value="${staffCount}" /> > 1){
            document.getElementById('removeDiv').style.display = '';
            window.dialogWidth='770px';
            window.dialogHeight='320px';
            window.document.getElementById('removeMainBody').innerHTML =window.document.getElementById('removeMainBody').innerHTML;
        }

Answer 1

如果您从Body-Tag设置样式或类，则应强制执行HTML Reflow，并且无需设置innerHTML属性，该网站将再次显示正确。

example:

...
window.document.body.className = "relfow"; 
// if the body class Attribute was set, than set it now back
window.document.body.className = "oldBodyStyleClassName" ; / Or just to ""
...

如果浏览器优化，则刷新调用，以便现在可以进行重排

setTimeout(function(){
...
window.document.body.className = "relfow"; 
// if the body class Attribute was set, than set it now back
window.document.body.className = "oldBodyStyleClassName" ; / Or just to ""
...
})

我希望这会有所帮助。（您可以在这里找到一些信息给Reflow Link）

调整窗口大小后，内部元素不再适用

1 个答案: