locked
How to Display 50 Ajax Tabs in page with a horizontal Scrollbars RRS feed

  • Question

  • User-1256377279 posted

    Hi Guys,

    I have an query if i had 50 Ajax Tab panel in the page how to add a horizontal scrollbars to it.

    Any suggestion would be much appreciated.

    Thanks in Advance

    Shabbir

    Wednesday, January 15, 2014 10:46 AM

Answers

  • User-417640953 posted

    Hi shabbir,

    Thank you post the issue to our forum.

    Based on your description, I see that you are using an AjaxControl TabContainer with lots of TabPanels.

    And you want to show those TabPanels with horizontal Scrollbars. As we know that the TabContainer will generate a div header

    which contains the TabPanels's header text using <span> tag.

       <div id="TabContainer1" class="ajax__tab_xp" style="width:200px;visibility:hidden;">
    	<div id="TabContainer1_header" class="ajax__tab_header">
                    ............other elements

    So we can set the div as scrollable whose class is "ajax__tab_header". Due to <span> tag in the div are auto line feed, so we should add a sub div to TabContainer1_header div.

    For this issue, I made a demo below, please check it.

    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function () { 
                
                $(".ajax__tab_header").html("<div style='height:100%;width:1200px;' >" + $(".ajax__tab_header").html() + "</div>");
                 
            })
        </script>
        <style>
            .ajax__tab_header
            {
               height:40px;
               width:200px;
               overflow:scroll;
               overflow-y:hidden;
            
            } 
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ></asp:ToolkitScriptManager>
            <asp:TabContainer ID="TabContainer1" runat="server" Width="200px" >
                <asp:TabPanel runat="server" ID="Panel1">
                    <HeaderTemplate>Panel1</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 1
                    </ContentTemplate>
                </asp:TabPanel>
                 <asp:TabPanel runat="server" ID="Panel2">
                    <HeaderTemplate>Panel2</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 2
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel3">
                    <HeaderTemplate>Panel3</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 3
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel4">
                    <HeaderTemplate>Panel4</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 5
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel5">
                    <HeaderTemplate>Panel5</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 5
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel6">
                    <HeaderTemplate>Panel6</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 6
                    </ContentTemplate>
                </asp:TabPanel>
            </asp:TabContainer>
        </div>
        </form>
    </body>

    It works fine in my side, please try it. Thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 16, 2014 4:15 AM

All replies

  • User-417640953 posted

    Hi shabbir,

    Thank you post the issue to our forum.

    Based on your description, I see that you are using an AjaxControl TabContainer with lots of TabPanels.

    And you want to show those TabPanels with horizontal Scrollbars. As we know that the TabContainer will generate a div header

    which contains the TabPanels's header text using <span> tag.

       <div id="TabContainer1" class="ajax__tab_xp" style="width:200px;visibility:hidden;">
    	<div id="TabContainer1_header" class="ajax__tab_header">
                    ............other elements

    So we can set the div as scrollable whose class is "ajax__tab_header". Due to <span> tag in the div are auto line feed, so we should add a sub div to TabContainer1_header div.

    For this issue, I made a demo below, please check it.

    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function () { 
                
                $(".ajax__tab_header").html("<div style='height:100%;width:1200px;' >" + $(".ajax__tab_header").html() + "</div>");
                 
            })
        </script>
        <style>
            .ajax__tab_header
            {
               height:40px;
               width:200px;
               overflow:scroll;
               overflow-y:hidden;
            
            } 
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ></asp:ToolkitScriptManager>
            <asp:TabContainer ID="TabContainer1" runat="server" Width="200px" >
                <asp:TabPanel runat="server" ID="Panel1">
                    <HeaderTemplate>Panel1</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 1
                    </ContentTemplate>
                </asp:TabPanel>
                 <asp:TabPanel runat="server" ID="Panel2">
                    <HeaderTemplate>Panel2</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 2
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel3">
                    <HeaderTemplate>Panel3</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 3
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel4">
                    <HeaderTemplate>Panel4</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 5
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel5">
                    <HeaderTemplate>Panel5</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 5
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel runat="server" ID="Panel6">
                    <HeaderTemplate>Panel6</HeaderTemplate>
                    <ContentTemplate>
                        I'm panel 6
                    </ContentTemplate>
                </asp:TabPanel>
            </asp:TabContainer>
        </div>
        </form>
    </body>

    It works fine in my side, please try it. Thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 16, 2014 4:15 AM
  • User-1256377279 posted

    Thank you so much, It worked for me Smile

    Cheers,

    Shabbir

    Thursday, January 16, 2014 9:45 AM