ASP.NET AJAX control toolkit tabs control not displayed

Question

I have following code for tabs control

<asp:TabContainer ID="exteriorDataTabsContainer" runat="server" Height="150px" Width="400px" ActiveTabIndex="1" style="visibility:visible">
                        <asp:TabPanel HeaderText = "Create task" >
                        <ContentTemplate>
                        create task
                        </ContentTemplate>
                        </asp:TabPanel>
                        <asp:TabPanel HeaderText = "Upload task data">
                        <ContentTemplate>
                        upload task data
                        </ContentTemplate>
                        </asp:TabPanel>
                        <asp:TabPanel HeaderText = "Download task data" >
                        <ContentTemplate>
                        download task data
                        </ContentTemplate>
                        </asp:TabPanel>
                        </asp:TabContainer>

when it is rendered it is looking as

<div id="ctl00_ContentPlaceHolder1_exteriorDataTabsContainer" class="ajax__tab_xp" style="width:400px;visibility:hidden;">
    <div id="ctl00_ContentPlaceHolder1_exteriorDataTabsContainer_header" class="ajax__tab_header">

    </div><div id="ctl00_ContentPlaceHolder1_exteriorDataTabsContainer_body" class="ajax__tab_body" style="height:150px;display:block;">

Why is the div rendered as hidden there? how to make it visible?

Answer 1

Add runat="server" to your asp:TabPanel

Try this:

<asp:TabContainer ID="exteriorDataTabsContainer"  ActiveTabIndex="1" runat="server" Height="150px" Width="400px" style="visibility:visible">
                        <asp:TabPanel HeaderText = "Create task" runat="server" ID="a1"   >
                        <ContentTemplate>

                        create task
                        </ContentTemplate>
                        </asp:TabPanel>
                        <asp:TabPanel HeaderText = "Upload task data" runat="server" ID="a2" >
                        <ContentTemplate>
                        upload task data
                        </ContentTemplate>
                        </asp:TabPanel>
                        <asp:TabPanel HeaderText = "Download task data" runat="server" ID="a3" >
                        <ContentTemplate>
                        download task data
                        </ContentTemplate>
                        </asp:TabPanel>
                        </asp:TabContainer>