While developing my app, I encountered an issue with implementing main pages using jQueryUI tabs with heightStyle:"fill". The problem arises when one of these pages contains two more tab elements that should appear side-by-side. To achieve this layout, I wrapped each tab in a <div> with specific CSS properties like height:100%, width:50%, and position:absolute. JSfiddle link can be found here.
The issue occurs when the default tab is set to "1." If I click on tab "2" after loading the page, the inner tabs display with incorrect height. However, changing the active option in the tabs() call to 1 resolves this problem as both tabs are visible upon page load.
To efficiently handle this situation, one solution is to run the "refresh" method on the inner tabs from a "tabsactivate" event handler on the outer-tabs element. However, triggering this event handler for all tabs, not just the specific one we're interested in, poses a challenge. Therefore, using callbacks effectively becomes crucial.
An alternative approach to address this issue involves adjusting the CSS as wrapping the inner tabs in a div with "position:absolute" might be causing the problem.
I welcome any suggestions or insights on resolving this matter! Thank you!