FOUC when using embedded Tabs (tabs within tabs) under IE using AJAX
Hey All!
Keeping in mind that the Tabs within tabs are a requirement and NOT a
design choice by me, I need some help preventing the Flash Of Unstyled
Content (FOUC). According to the documentation you can apply the ui-
tabs-hide class to the panel and that should prevent it. I've done
that to the embedded tabs and it works. Unfortunately, when I hide my
top level tabs they are hidden on load. I've tried removing the tabs
on document-ready but that causes the panels all to show up in line
under IE though firefox seems okay with it. Here is the (modified)
code:
<div class="ui-tabs">
<div id="tabs">
<ul>
<li><a href="--alink--">Overall Summary</a></li>
<g:each in="${blah}">
<li><a href="#tabs-${blah}">blah</a></li>
</g:each>
</ul>
<g:each in="${blah}" var="blah">
<div id="tabs-${blah}" class="ui-tabs-hide">
<div class="tabs_head">
<ul>
<li><a href="blah">someConent</a></li>
<g:each in="${blah}" var="blah">
<li><a href="--alink--">someContent</a></li>
</g:each>
</ul>
</div>
</div>
</g:each>
</div>
</div>
THanks in advance!
-Steve