In a web application, I'm hitting some troubles with dynamic content - whereby a form being hidden or shown above a jQuery UI tab control causes rendering issues until the user hovers there mouse over the tabs, which then causes the tab header to redraw in the correct location.

It's only occurring in IE7 and as a quick hack I'm doing this after showing the form to cause the tab's div to be refreshed in IE:

$('#tabs').css('display', 'none').css('display', 'block');

I'm just wondering if there is a more appropriate/robust way to cause a div element to redraw itself/recalculate the layout of elements on a page, as I'm worried my approach may have unwanted side-effects on other browsers.

In a web application, I'm hitting some troubles with dynamic content - whereby a form being hidden or shown above a jQuery UI tab control causes rendering issues until the user hovers there mouse over the tabs, which then causes the tab header to redraw in the correct location.

It's only occurring in IE7 and as a quick hack I'm doing this after showing the form to cause the tab's div to be refreshed in IE:

$('#tabs').css('display', 'none').css('display', 'block');

I'm just wondering if there is a more appropriate/robust way to cause a div element to redraw itself/recalculate the layout of elements on a page, as I'm worried my approach may have unwanted side-effects on other browsers.

• javascript
• jquery
• jquery-ui
• tabs

2 Answers 2

Wild guess, but could be hasLayout.

Try adding something like:

#tabs {
  zoom: 1;
}

I had a similar issue to this once, it turned out to be an issue with the width not being set on the displaying div. When I set the static px width on the element it worked.