Fixed the height problem in ExpandableTile

[dward2nd]

I encountered the problem while adding Tile and ExpandableTile to the component preview, as you can see below.

Though the folding works, the tile's height doesn't. I tried to figure out the code behind Carbon's Expandable Tile and discovered that the CSS property max-height of expandable tiles is assigned based on the newly added tile nodes that don't have any stylesheets applied to them.

I solved this problem by appending the tile only after the document's is loaded. In other words, a whole webpage, both DOM and stylesheets, must be successfully loaded before expandable tiles can be displayed.

[dward2nd]

Done as you suggested.

[dward2nd]

I am not sure I understand why you render the tile, then assign the content to a javascript variable and then insert the javascript variable onload. Can you explain why you do not insert the tiles_nodes directly, without rendering them here? This will be a problem if any of the content depends on the context, the hg.render function that you are calling has an empty context, so the elements inside cannot rely on values from the context.

This is because the carbon's ExpandableTile event handler related to folding and unfolding tries to retrieve the tile's height from the element with no CSS properties applied to it. (It might be something like DOMContentLoaded that might occur before CSS is fully loaded.) Initially, the height is simply calculated using above height + below height, but the problem is that the initial height is always 0. So the height is calculated incorrectly.

This problem also appears on the demo page as well. The one that works is in the official documentations, But I think they might use the different version of Carbon, or maybe with the help of different framework, like React. I tried to replicate like they did but didn't work.

[saemideluxe]

Okay, but in any case we need to find another solution. The problem is that calling "render" inside an __init__ method will make the element unusable in many cases. Because as the content inside the tile is likely going to need a full render context.

[saemideluxe]

Can you see if there is maybe a solution where you render normally, and you adjust either with CSS or with some javascript inside onload attributes, or similar?

[dward2nd]

I've completed the fix using the solution that you suggested, by adding a temporary observer like one from the carbon design's pull request.