An application I’m working on features tabs inside a jQuery UI accordion inside yet another set of tabs. The problem I was having was that, for some unknown reason, the accordion became way too high or way to narrow.
It turned out to be logically related to the nesting of the UI widgets and the order in which the widgets were created. If the accordion is rendered before the inner tabs are rendered, the contents of the inner tabs are (still) displayed below each other. The accordion calculates the necessary height based on these vertically stacked elements. Subsequently, the inner tabs are created and a big empty space remains inside the accordion. Another related problem is that when the accordion is created, the actual contents have to be visible for the height calculation to be performed properly. In my case, the accordion is not on the first (outer) tab that is visible by default, but on a subsequent tab, causing the accordion to be rendered with minimum height (approximately 50 pixels) by default.
The final solution was:
1. Create the (inner and outer) tabs
2. Select the outer tab that contains the accordion
3. Create the accordion
4. Re-select the initially selected outer tab.
All logical in retrospect, but isn’t that always the case.