Search code examples
asp.netgoogle-chromemonoajaxcontroltoolkitmonodevelop

AJAXControlToolkit - TabContainer not visible

I am using MonoDevelop on MacOS and I am having difficulty getting AjaxControlToolkit's TabContainer visible on Google Chrome. I even set the visible property to true for both the TabContainer and TabPanels but it still did not work. Here is the source HTML:

<ajaxToolkit:ToolkitScriptManager  id="tsm1" runat="server" />

    <div style="position:absolute;top:0px;left:0px;">
       <img src="" />
    </div>
    <div style="position:absolute;top:200px;left:20px;">
    <ajaxToolkit:TabContainer id="NewTabContainer" runat="server" Height="300px" Visible="true" >
        <ajaxToolkit:TabPanel id="FirstPanel" runat="server" HeaderText="Tab 1" Visible="true" >
            <ContentTemplate>
                PAGE ONE - This is the first Panel.
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel id="SecondPanel" runat="server" HeaderText="Tab 2" Visible="true" >
            <ContentTemplate>
                PAGE TWO - This is the second Panel.
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
     </ajaxToolkit:TabContainer>

This is the HTML Chrome is generating:

<div id="NewTabContainer" class="ajax__tab_xp" style="visibility:hidden;">
    <div id="NewTabContainer_header">
        <span id="NewTabContainer_FirstPanel_tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab" id="__tab_NewTabContainer_FirstPanel">Tab 1</span></span></span></span><span id="NewTabContainer_SecondPanel_tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab" id="__tab_NewTabContainer_SecondPanel">Tab 2</span></span></span></span>
    </div><div id="NewTabContainer_body" style="height:300px;">
        <div id="NewTabContainer_FirstPanel" class="ajax__tab_panel">

                PAGE ONE - This is the first Panel.

        </div><div id="NewTabContainer_SecondPanel" class="ajax__tab_panel" style="display:none;visibility:hidden;">

                PAGE TWO - This is the second Panel.

        </div>
    </div>
</div>
Solution

  • Having just copied the TabContainer from the AJAX site, I had the OnClientActiveTabChanged property set in my TabContainer without having a javascript function "ClientFunction" written. Once I removed this property, my tabs were visible and working. Of course, if you need this property, you'll need to write a javascript function to go along with it. 

    OnClientActiveTabChanged="ClientFunction"