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

move the CSS from a anchor to li anchor

7 Answers 118 Views

TabStrip

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

stevied asked on 23 Jul 2009, 11:52 PM

I have the following code

    
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
        
                            Skin="" EnableEmbeddedSkins="False"> 
        
                            <Tabs> 
        
                                <telerik:RadTab runat="server" SelectedIndex="0"  
        
                                    Text="cbfootball.co.uk" CssClass="cbTab"  SelectedCssClass="cbSelected" 
        
                                    HoveredCssClass="cbHovered" ChildGroupCssClass="cbChildTab"  
        
                                    NavigateUrl="~/default.aspx"> 
        
                                    <Tabs> 
        
                                        <telerik:RadTab runat="server" Text="Home" CssClass="first" NavigateUrl="~/default.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="News" NavigateUrl="~/news.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="Community" /> 
        
                                        <telerik:RadTab runat="server" Text="Awards" /> 
        
                                        <telerik:RadTab runat="server" Text="Competitions" /> 
        
                                        <telerik:RadTab runat="server" Text="Activity" /> 
        
                                        <telerik:RadTab runat="server" Text="Predictions" /> 
        
                                        <telerik:RadTab runat="server" Text="Under 19s" /> 
        
                                        <telerik:RadTab runat="server" Text="Charity" /> 
        
                                        <telerik:RadTab runat="server" Text="Contact" CssClass="tabLast" NavigateUrl="~/contact_cbfootball.aspx" /> 
        
                                   </Tabs> 
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab runat="server" Text="Score Selector" 
        
                                    Width="240px" CssClass="ssTab" SelectedCssClass="ssSelected" SelectedIndex="0" 
        
                                    HoveredCssClass="ssHovered" ChildGroupCssClass="ssChildTab"  
        
                                    NavigateUrl="~/score_selector/Default.aspx"> 
        
                                    <Tabs> 
        
                                        <telerik:RadTab runat="server" Text="Home" CssClass="first" NavigateUrl="~/score_selector/Default.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="Make Predictions"  NavigateUrl="~/score_selector/makepredictions.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="My Results" /> 
        
                                        <telerik:RadTab runat="server" Text="Mini Leagues" /> 
        
                                        <telerik:RadTab runat="server" Text="Create Leagues" /> 
        
                                        <telerik:RadTab runat="server" Text="Invite Friend" /> 
        
                                        <telerik:RadTab runat="server" Text="Prizes" /> 
        
                                        <telerik:RadTab runat

Whihc produces HTML like this...

    
            <div id="tabNav"> 
        
                        <div id="ctl00_mainNav1_RadTabStrip1" class="RadTabStrip RadTabStrip_ RadTabStripTop_ "> 
        
                <!-- 2008.3.1314.35 --><div class="rtsLevel rtsLevel1"> 
        
                    <ul class="rtsUL"><li class="rtsLI rtsFirst"><a class="rtsLink cbTab rtsSelected cbSelected" href="default.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">cbfootball.co.uk</span></span></span></a></li><li class="rtsLI rtsLast" style="width:240px;"><a class="rtsLink rtsAfter ssTab" href="score_selector/Default.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Score Selector</span></span></span></a></li></ul>

As you can see i have two main tabs which are identified in the a anchor (cbTab and ssTab) Is there a way to move these identifers to the li or indeed the ul as I am using sIFR for my menu headers which does NOT like a anchors which is giving me an click error in IE7 & 8, hopes this makes sense.

Regards,

Stevied

7 Answers, 1 is accepted

answered on 24 Jul 2009, 12:16 PM

Hello Stephen,

It does make sense!

Unfortunately, we don't have a property to change the CssClass of the wrapping element. Such a feature makes sense and I'll make sure to implement it next week. If time is of critical importance, you can move the classes using the following jQuery snippet:

$telerik.$('#<%= RadTabStrip1.ClientID %> .rtsLink').each (function () {
    var customCssClass = this.parentNode._item.get_cssClass();
    if (customCssClass !== "") {
        $telerik.$(this.parentNode).addClass(customCssClass);
        this.parentNode._item.set_cssClass("");
    }
});

// init sIFR

Greetings,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.