This is a migrated thread and some comments may be shown as answers.

Tabs disappear when scrolling is enabled.

1 Answer 55 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Craig Anderson
Top achievements
Rank 1
Craig Anderson asked on 16 Sep 2009, 06:59 PM
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;  

1 Answer, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 22 Sep 2009, 11:46 AM
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.
Tags
TabStrip
Asked by
Craig Anderson
Top achievements
Rank 1
Answers by
Paul
Telerik team
Share this question
or