Create A Single Row Horizontal Scrollbar for Ajax Tab

See more:

C#

ASP.NET

Javascript

Ajax

jQuery

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