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

Selected CSS Removed when Same as Hovered CSS

2 Answers 97 Views

TabStrip

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Accepted

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.