I currently am using Ajax Tab Containers with Tab Panels to display different information. However when trying to nest them inside each other they suddenly are invisible when the page renders. However this only happens when the Tab Panel is not nested on the first, for example this works:
<ajx:TabContainer runat="server" ID="tcMain" CssClass="MyTabStyle" ActiveTabIndex="0">
<ajx:TabPanel runat="server" ID="tp1" HeaderText="Job Vacancies">
<ContentTemplate>
<ajx:TabContainer runat="server" ID="tcSubMain" CssClass="MyTabStyle" ActiveTabIndex="0">
<ajx:TabPanel runat="server" ID="tpSub1" HeaderText="Job Vacancies">
<ContentTemplate>
</ContentTemplate>
</ajx:TabPanel>
</ajx:TabContainer>
</ContentTemplate>
</ajx:TabPanel>
</ajx:TabContainer>
However this doesn't work:
<ajx:TabContainer runat="server" ID="tcMain" CssClass="MyTabStyle" ActiveTabIndex="0">
<ajx:TabPanel runat="server" ID="tp1" HeaderText="Job Vacancies">
<ContentTemplate>
</ContentTemplate>
</ajx:TabPanel>
<ajx:TabPanel runat="server" ID="tp2" HeaderText="Job Vacancies">
<ContentTemplate>
<ajx:TabContainer runat="server" ID="tcSubMain" CssClass="MyTabStyle" ActiveTabIndex="0">
<ajx:TabPanel runat="server" ID="tpSub1" HeaderText="Job Vacancies">
<ContentTemplate>
</ContentTemplate>
</ajx:TabPanel>
</ajx:TabContainer>
</ContentTemplate>
</ajx:TabPanel>
</ajx:TabContainer>
I've researched methods and ways but there doesn't seem to be much online in the way of reasons when the second method causes the Tab Container to be completely invisible.
I checked on FireBug and the CSS did not have any "visibility:hidden" or "display:none" in it, so it could not be attributed to the CSS file attached.
Thanks,
Firstcape