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)
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 |
{ |
width: 788px; |
height: 20px; |
border: 0px; |
margin-bottom: 0px; |
} |
div.divBusinessSearchPanel .tab, div.divBusinessSearchPanel .tabHover, div.divBusinessSearchPanel .tabSelected |
{ |
display: inline-block; |
width: 120px; |
height: 18px; |
margin: 0px 2px 0px 0px; |
padding: 2px 0px 0px 0px; |
font-size: 12px; |
font-weight: bold; |
color: #ffffff; |
text-align: center; |
} |
div.divBusinessSearchPanel .tab |
{ |
background-image: url(/images/ReusableControls/BusinessSearchPanel/bg-tab.png); |
color: #ffffff; |
} |
div.divBusinessSearchPanel .tabHover |
{ |
background-image: url(/images/ReusableControls/BusinessSearchPanel/bg-tab.png); |
color: #fff000; |
} |
div.divBusinessSearchPanel .tabSelected |
{ |
background-image: url(/images/ReusableControls/BusinessSearchPanel/bg-tab-selected.png); |
color: #f0f0f0; |
} |
div.divBusinessSearchPanel .rtsPrevArrow |
{ |
background-color: #eeefff; |
} |
div.divBusinessSearchPanel .rtsNextArrow |
{ |
background-color: #000fff; |
} |