locked
TabContainer and TabPanel RRS feed

  • Question

  • User-1466119671 posted

    I've got an app that I have upgrade from an old version of the ajax control toolkit to the most recent version (16.1).  I am getting several problems with the TabContainer/TabPanel.

    • The content displays to the right of the tabcontainer. So, content is not displaying in the correct location inspite of my setting the TabStripPlacement to the value of Top.  this is occurring in FF & Chrome all the time.  Sometimes it happens in IE.
    • The tabpanels are displaying in the opposite order of what I am putting them in as.

    Here are the items that I have done:

    • uninstalled old control toolkit.  Installed 16.1 version including the nuget package.  Installed the 16.1 static resources via nuget as well.
    • Updated my masterpage to have the style information in the head,  added the script bundle in the script manager. 

    Thoughts on this?  Thanks

    Wally

    Monday, March 28, 2016 7:25 PM

Answers

  • User61956409 posted

    Hi Wally,

    Firstly, you could use the developer tools to check the actual CSS styles are applied to TabContainer. And please make sure if any CSS files are not loaded successfully in your web page.

    Secondly, as I said in my previous reply, I could not reproduce the problem on my side. and I share my working sample, you could create a new web page to test if my sample code works on your side or not.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 5, 2016 7:29 AM

All replies

  • User61956409 posted

    Hi Wally,

    I create a sample using TabContainer control, the code works fine on IE11.

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Height="150px" ActiveTabIndex="0">
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    Content1
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                <ContentTemplate>
                    Content2
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
    </div>
    

    You could try to reinstall the ajax control toolkit and create a new project to test whether TabContainer works or not.

    Best Regards,

    Fei Han

    Best Regards,

    Fei Han

    Tuesday, March 29, 2016 5:39 AM
  • User-1466119671 posted

    Here is the code that I am using.  This is a complete source of the page that I am testing.  My customer users Chrome for their internal work.  I have posted an image of how it looks in chrome at the bottom.  I have a lot of csutomization happening on my full page.  I figure I am going to have to go through it and make changes, however, this example not working correctly in Chrome is pretty tough to overcome.  Any thoughts are appreciated.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

    <!DOCTYPE html>

    <html>
    <head runat="server">
    <title></title>
    <asp:PlaceHolder runat="server">
    <%: System.Web.Optimization.Styles.Render("~/Content/AjaxControlToolkit/Styles/Bundle") %>
    </asp:PlaceHolder>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server">
    <Scripts>
    <asp:ScriptReference Path="~/Scripts/AjaxControlToolkit/Bundle" />
    </Scripts>
    </asp:ScriptManager>
    <div>
    <actk:TabContainer ID="tcMain" runat="server" TabStripPlacement="TopRight"
    CssClass="MyTabStyle" AutoPostBack="true"> // I have also tried setting the TabStripPlacement to just Top with no love.
    <actk:TabPanel HeaderText="Stage 2" runat="server">
    <HeaderTemplate>
    Stage 2
    </HeaderTemplate>
    <ContentTemplate>
    test three
    </ContentTemplate>
    </actk:TabPanel>
    <actk:TabPanel HeaderText="Stage" runat="server" ID="tpStage" AccessKey="2" BackColor="silver" >
    <HeaderTemplate>
    Stage
    </HeaderTemplate>
    <ContentTemplate>
    test two
    </ContentTemplate>
    </actk:TabPanel>
    </actk:TabContainer>
    &nbsp;&nbsp;&nbsp;
    </div>
    </form>
    </body>
    </html>

    </html>

    Tuesday, March 29, 2016 5:54 PM
  • User61956409 posted

    Hi Wally,

    Firstly, you could use the developer tools to check the actual CSS styles are applied to TabContainer. And please make sure if any CSS files are not loaded successfully in your web page.

    Secondly, as I said in my previous reply, I could not reproduce the problem on my side. and I share my working sample, you could create a new web page to test if my sample code works on your side or not.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 5, 2016 7:29 AM