Selected CSS Removed when Same as Hovered CSS

3 posts, 1 answers
  1. Pat
    Pat avatar
    31 posts
    Member since:
    Dec 2011

    Posted 12 Aug 2013 Link to this post

    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. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 13 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pat
    Pat avatar
    31 posts
    Member since:
    Dec 2011

    Posted 13 Aug 2013 Link to this post

    Perfect, thanks for the work around!

    -  Pat
Back to Top