How can I force reflow after DHTML change in IE7?

javascript internet-explorer-7 dhtml reflow
Freewalker picture Freewalker · Nov 9, 2009 · Viewed 8.4k times · Source

I have a page where the user can dynamically add file upload boxes. Adding the boxes changes the height of the div they are in, but certain elements of the div below it stay in the same place, so they start to overlap with the new DOM elements.

This works correctly in IE8, Firefox, Chrome. How can I force IE7 to reflow the page with the new DHTML?

The best solution I worked out was this:

window.resizeBy(1, 0); 
setTimeout(UndoResize, 0);

But it doesn't work with a maximized window (it restores the window).

Answer

NickFitz picture NickFitz · Nov 9, 2009

Try:

element.className = element.className;

on the modified div (or possibly its parent, or even a more remote ancestor, depending on various factors such as relatively-positioned containment).

As the className has been assigned a value IE will reflow and repaint that portion of the page in case the CSS affecting that element has changed. Luckily, it isn't optimised to check if the className value actually changed from its previous value, so the above will trigger the reflow without breaking anything else.

I did find one occasion when this fixed IE6 but broke IE7, but try it and see if it works for you.

Related questions

Programmatically open new pages on Tabs

I'm trying to "force" Safari or IE7 to open a new page using a new tab. Programmatically I mean something like: window.open('page.html','newtaborsomething');

Read More
document.body.appendChild(i)

I am getting error only in IE7 as document.body is null; when I debug with Microsoft script editor I am getting the error in the following line: i.e. document.body.appendChild(i) Code: function nm_eraseCookie(name){ nm_…

Read More
Debugging JavaScript in IE7

I need to debug JavaScript in Internet Explorer 7. Unfortunately, its default debugger doesn't provide me with much information. It tells me the page that the error showed up on (not the specific script) and gives me a line number. I …

Read More