Tabs disappear when scrolling is enabled.

2 posts, 0 answers
  1. Craig Anderson
    Craig Anderson avatar
    1 posts
    Member since:
    Sep 2009

    Posted 16 Sep 2009 Link to this post

    Hello -

    I have a tabstrip setup on a page in my system. It was initially setup to show the 4 most popular categories as tabs with a 5th tab to alowing users to click to view more categories. Because we only have 15 categories and most visitors only see 7-9 I thought I would just enable scrolling. However, when I enable scrolling, ALL the tabs disappear. The SAME code without tabs enabled works fine, I just have extra code for the datasource to only grab the top 4 categories and then manually add a fifth row.

    Below is the relevant code, please note I am using CSS to define a custom look/feel for the tabs.

    Any help would be greatly appreciated, I am spinning my wheels on this.

    P.S. - The next, prev arrows show up to the right of the tabs div as I would expect them too. The number of times I can click next seems odd though as it lets me click 21 times, there would be a max of 15 tabs and 6 could fit in the area provided.

    Default.aspx (Relevant Portion Only)

     

    <div id="tabs">   
        <telerik:RadTabStrip ID="rtsCategoryList" runat="server" skin="" EnableEmbeddedSkins="false" Width="788px" Height="20px"   
            OnTabClick="rtsCategoryList_TabClick" ScrollChildren="true"   
            PerTabScrolling="true" ScrollPosition="0" BackColor="#000000" ScrollButtonsPosition="Right">   
        </telerik:RadTabStrip>   
    </div> 

    Default.aspx.cs (Relevant Portion Only)

     

                DataTable table = RetrievalProcedures.SpWsGetCategoriesByCityState(_city, _state);  
                  
                // Build the tabs.  
                foreach (DataRow row in table.Rows)  
                {  
                    RadTab newTab = new RadTab();  
                    newTab.Value = row["categoryId"].ToString();  
                    newTab.Text = row["categoryName"].ToString();  
                    newTab.CssClass = "tab";  
                    newTab.HoveredCssClass = "tabHover";  
                    newTab.SelectedCssClass = "tabSelected";  
                    rtsCategoryList.Tabs.Add(newTab);  
                }  
     
                // Set the first tab as selected.  
                rtsCategoryList.Tabs[0].Selected = true;  
     

     

     

    main.css (Relevant Portion Only)

    div.divBusinessSearchPanel #tabs 
    {  
        width788px;  
        height20px;  
        border0px;  
        margin-bottom0px;  
    }  
     
    div.divBusinessSearchPanel .tab, div.divBusinessSearchPanel .tabHover, div.divBusinessSearchPanel .tabSelected  
    {  
        displayinline-block;  
        width120px;  
        height18px;  
        margin0px 2px 0px 0px;  
        padding2px 0px 0px 0px;  
        font-size12px;  
        font-weightbold;  
        color#ffffff;  
        text-aligncenter;  
    }  
     
    div.divBusinessSearchPanel .tab  
    {  
        background-imageurl(/images/ReusableControls/BusinessSearchPanel/bg-tab.png);   
        color#ffffff;  
    }  
     
    div.divBusinessSearchPanel .tabHover  
    {  
        background-imageurl(/images/ReusableControls/BusinessSearchPanel/bg-tab.png);   
        color#fff000;  
    }  
     
    div.divBusinessSearchPanel .tabSelected  
    {  
        background-imageurl(/images/ReusableControls/BusinessSearchPanel/bg-tab-selected.png);   
        color#f0f0f0;  
    }  
     
    div.divBusinessSearchPanel .rtsPrevArrow  
    {  
        background-color#eeefff;  
    }  
     
    div.divBusinessSearchPanel .rtsNextArrow  
    {  
        background-color#000fff;  

  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 22 Sep 2009 Link to this post

    Hello Craig,

    Unfortunately, the provided information does not help us much in reproducing the error. It will be best if you can send us a live URL or open a support ticket and send us a simple running project (incl. CSS, images, skins, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Sincerely yours,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top