locked
Create A Single Row Horizontal Scrollbar for Ajax Tab RRS feed

  • Question

  • User-471962099 posted

    Hi Members,

    I have an Ajax tab container that contains many tabs. After a certain number of tabs, tabs will overflow and appear on the second row. Does anyone know how I could create a single row horizontal scrollbar for the overflowing Ajax tabs? Have researched online for quite some time but couldn't find a solution to it..

    This is the Output I want to achieve:

    http://i.stack.imgur.com/Ogymc.png

    This is my current codes to create the tabs dynamically:

    //Aspx file:
    
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
    
            </div>
            <br />
    
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                </ContentTemplate>
            </asp:UpdatePanel>
    
    
    //Cs file:
    protected void RETRIEVE_BUTTON_Click(object sender, EventArgs e)
            {
                AjaxControlToolkit.TabContainer container = new AjaxControlToolkit.TabContainer();
                container.ID = DateTime.Now.Millisecond.ToString();
                container.EnableViewState = false;
                container.Tabs.Clear();
                container.Height = Unit.Pixel(500);
                container.Width = Unit.Pixel(1200);
                container.Tabs.AddAt(0, GetManualTab());
    
                foreach (ListItem item in SelectionListBox.Items)
                {
                    if (item.Selected)
                    {
                        Label tabContent = new Label();
                        tabContent.ID = "lbl_tab_";
                        tabContent.Text += item.Value;
    
                        AjaxControlToolkit.TabPanel panel = new AjaxControlToolkit.TabPanel();
                        panel.HeaderText += item.Value;
                        container.Tabs.Add(panel);
                        panel.Controls.Add(tabContent);
                    }
                }
                PlaceHolder1.Controls.Add(container);
            }
    
            public AjaxControlToolkit.TabPanel GetManualTab()
            {
                AjaxControlToolkit.TabPanel panel = new AjaxControlToolkit.TabPanel();
                return panel;
            }

    Question: how could I create a single row horizontal scrollbar for the overflowing Ajax tabs?

    Appreciate if someone can help me on this, thanks a lot!!

    Regards,

    Felicia

    Tuesday, October 6, 2015 5:51 AM

Answers

  • User61956409 posted

    Hi Felicia,

    This is the Output I want to achieve:

    http://i.stack.imgur.com/Ogymc.png

    According to your description, it seems that you’d like to implement a Scrollable tabs, if that is the case, you could try to use jQuery-ui Scrollable tabs plugin.

    http://aamirafridi.com/jquery/jquery-scrollable-tabs

    Besides, you could try to append your tabs in a div container and set “overflow-x: scroll” for div.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 7, 2015 1:54 AM