Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Selected CSS Removed when Same as Hovered CSS

2 Answers 51 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Pat
Top achievements
Rank 1
Pat asked on 12 Aug 2013, 07:01 PM
I'm trying to develop a tabstrip where the selected css and the hovered css are the same.  However, what happens is the following:
  -  When the tab is selected, hover over over the selected item.  
  -  Mouse away from the selected tab
  -  The selected tab no longer returns back to its selected css state, it returns back to the css class of the tab instead.

See the below code snippet for an example.  Is there an easy solution i'm missing?

<%@ Page Language="C#" AutoEventWireup="true" Inherits="Testing2.TestRadTabs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title>Test with Tabs</title>
    <style type="text/css">
        .tabCSS
        {
            background-color:#cde3ee;
            color:White;
            padding-top:5px;
            padding-bottom:5px;
            font-size:14px;
            font-weight:bold;
        }
        .selectedCSS
        {
            background-color:#5ba7cb !important;
            color:White;
            padding-top:5px;
            padding-bottom:5px;
            font-size:14px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
    <telerik:RadTabStrip ID="tsMessages" runat="server" Width="100%" MultiPageID="mpMessages" EnableEmbeddedSkins="false">
        <Tabs>
            <telerik:RadTab Text="Inbox" CssClass="tabCSS" HoveredCssClass="selectedCSS" SelectedCssClass="selectedCSS" Selected="true"></telerik:RadTab>
            <telerik:RadTab Text="Sent"  CssClass="tabCSS" HoveredCssClass="selectedCSS" SelectedCssClass="selectedCSS"></telerik:RadTab>
            <telerik:RadTab Text="Deleted" CssClass="tabCSS" HoveredCssClass="selectedCSS" SelectedCssClass="selectedCSS"></telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="mpMessages" runat="server">
        <telerik:RadPageView ID="pageOne" runat="server" Selected="true">
            Inbox messages.
        </telerik:RadPageView>
        <telerik:RadPageView ID="pageTwo" runat="server">
            Sent messages.
        </telerik:RadPageView>
        <telerik:RadPageView ID="pageThree" runat="server">
            Deleted messages.
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    </form>
</body>
</html>


Thanks again or the help!

-  Pat

2 Answers, 1 is accepted

Sort by
0
Accepted
Magdalena
Telerik team
answered on 13 Aug 2013, 11:04 AM
Hi Pat,

Actually this is an issue of the RadTabStrip. Please excuse us for any inconvenience caused by the issue. I have logged it for fixing. We will make our best to fix it as soon as possible.

 You can use the following selectors for preliminary solving the problem

.rtsSelected,
.rtsLink:hover
{
  background-color:#5ba7cb !important;
  color:White;
  padding-top:5px;
  padding-bottom:5px;
  font-size:14px;
  font-weight:bold;
}
Regards,
Magdalena
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Pat
Top achievements
Rank 1
answered on 13 Aug 2013, 01:10 PM
Perfect, thanks for the work around!

-  Pat
Tags
TabStrip
Asked by
Pat
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Pat
Top achievements
Rank 1
Share this question
or