Layout problem placing widget in elements with display:none



I’m working on a project that has multiple twitter widgets on the homepage, which are organised into tabs using jquery UI. The widget on the initial open tab is displayed fine but subsequent widgets on hidden tabs do not render properly. In firefox the “Tweet to” field is hidden, in chrome the widget appears too short - it appears that each browser is coming up with a different value for the height of the “stream” div.

Further investigation reveals that the problem occurs when the parent element is set to display:none.

I have thought of a couple of solutions, one is to somehow create the tabs after the widgets have loaded, the other is to refresh/redraw the widget when the user switches tabs.

So, is there A: An event that is fired after the widgets have loaded that I can add a callback to? OR

B: A function that enables me to manually create/refresh the widgets?

Please advise if either solution is possible.



I have same issue.