Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Create A Single Row Horizontal Scrollbar for Ajax Tab

$
0
0

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 theoverflowing Ajax tabs?

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

Regards,

Felicia


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>