locked
Create a Horizontal Scroll Tab in Ajax Tab Container For Overflowing Tabs RRS feed

  • Question

  • User-471962099 posted

    hi, I got many tabs inside ajax tab container that cannot be fit into one row. So I would like to create a horizontal scroll tab for ajax tab container to fit all tabs into a single row.

    I have tried research online for quite awhile but still couldn't find a solution to it. My ajax tab container and tab panel would be created dynamically in c#.

    This is the output that I would like to achieve: (See here: http://i.stack.imgur.com/bUnK4.png)

    This is my codes:

    //Aspx file
     <div>
                 <asp:scriptmanager ID="ScriptManager1" runat="server">
                </asp:scriptmanager>
            </div>
            <asp:updatepanel ID="UpdatePanel1" runat="server" ScrollBars="Horizontal">
                <contenttemplate>
            <asp:placeholder ID="PlaceHolder1" runat="server"></asp:placeholder>
     
                    <asp:Chart runat="server">
     
                    </asp:Chart>
     
                </contenttemplate>
            </asp:updatepanel>
     
    //Cs file
    AjaxControlToolkit.TabContainer container = new AjaxControlToolkit.TabContainer();
                container.ID = "TabContainer";
                container.EnableViewState = false;
                container.Tabs.Clear();
                container.Height = Unit.Pixel(2000);
                container.Width = Unit.Pixel(2000);
                container.Tabs.AddAt(0, GetManualTab());
    
      AjaxControlToolkit.TabPanel panel = new AjaxControlToolkit.TabPanel();
                        panel.HeaderText += item.Text;
                        container.Tabs.Add(panel);

    Question: How to create a horizontal scroll tab in ajax tab container in order to fit many tabs into one row?

    Appreciate if someone could provide me help on this. Thanks!

    Regards,

    Felicia

    Wednesday, September 30, 2015 8:52 PM

Answers

  • User-271186128 posted

    Hi Felicia,

    How to create a horizontal scroll tab in ajax tab container in order to fit many tabs into one row?

    As for this issue, here is a sample, you could refer it:

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function () {
    
                $(".ajax__tab_header").html("<div style='height:80px;width:1200px;' >" + $(".ajax__tab_header").html() + "</div>");
    
            })
        </script>
        <style>
            .ajax__tab_header {
                height: 40px !important;
                width: 200px;
                overflow: scroll;
                overflow-y: hidden;
            }
        </style>
    
    
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <div>
                <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>
                <asp:HiddenField ID="HiddenField1" runat="server" Value="" />
            </div>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 1, 2015 9:55 PM

All replies

  • User-271186128 posted

    Hi Felicia,

    How to create a horizontal scroll tab in ajax tab container in order to fit many tabs into one row?

    As for this issue, here is a sample, you could refer it:

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function () {
    
                $(".ajax__tab_header").html("<div style='height:80px;width:1200px;' >" + $(".ajax__tab_header").html() + "</div>");
    
            })
        </script>
        <style>
            .ajax__tab_header {
                height: 40px !important;
                width: 200px;
                overflow: scroll;
                overflow-y: hidden;
            }
        </style>
    
    
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <div>
                <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>
                <asp:HiddenField ID="HiddenField1" runat="server" Value="" />
            </div>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 1, 2015 9:55 PM
  • User-471962099 posted

    Hi Zhi Lv,

    thanks for your solution, it works! but do you know how can I make the scrollbar to turn from left to right instead of up to down? means a horizontal scrollbar instead of a vertical scrollbar.

    The solution you provided me now looks like that: (See here: http://i.stack.imgur.com/I4D2r.png).

    Do you know how I can make it into like this: (See here: http://i.stack.imgur.com/bUnK4.png).

    I tried to set the style properties of overflow-x: to 'scroll', 'visible' and so on but doesn't work.

    Appreciate if you could guide me on this, thank a lot!!

    Regards,

    Felicia

    Friday, October 2, 2015 2:30 AM