I'm facing the following scenario (only with IE8):
In JavaScript I'm changing the height of an IFRAME child element that's being controlled by a Collapsible Panel from 0 to the actual height as soon as it's being initially loaded.
My code works flawlessly until above Collapsible Panel control itself is being placed into another Collapsible Panel control on the ASPX page. The outer Collapsible Panel then doesn't adhere to the new height (= the sum of the heights of all descendant Collapsible Panel controls, incl. content) I've set the IFRAME child element to using JavaScript. So, no matter if I open or close the child Collapsible Panel, the IFRAME's content is never visible.
How can I have all parent Collapsible Panel controls recalculate their height according to current content in JavaScript?
This is what the HTML tree looks like:
+ Collapsible Panel #1
|
|-----+ Collapsible Panel #2
| |
| \----- Some DIV content
|
\-----+ Collapsible Panel #3
|
\----- My IFRAME content
In this example, the height of Collapsible Panel #1 doesn't get recalculated after I've changed the height of my IFRAME content using JavaScript.
