HoveredCssClass no working

10 posts, 0 answers
  1. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    Hi,

    <telerik:RadButton runat="server" ID="menuBtn" AutoPostBack="false" OnClientClicked="BtnClick"
        HoveredCssClass="menuImageHover" CssClass="menuImage" PressedCssClass="menuImagePressed">
        <ContentTemplate>
            <div id="mButton" class="mainMenuButton" runat="server">
                <table border="0">
                    <tr>
                        <td>
                            <img id="icon" alt="" runat="server" />
                        </td>
                        <td style="width: 100%; text-align: center">
                            <span id="text" runat="server"></span>
                        </td>
                    </tr>
                </table>
            </div>
        </ContentTemplate>
    </telerik:RadButton>

    CSS:
    .menuImageHover
    {
        background-position: -150px;
    }
     
    .menuImagePressed
    {
        background-position: -300px;
    }
     
    .menuImage
    {
        background: url('../Images/menu_button.png') no-repeat;
        height: 70px;
        width: 150px !important;
        position: relative;
        display: block;
    }

    I got the image in the menuImage class, but when I hover or click on the button, nothing happens.

    Did I miss something?

    Thanks
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jul 2012 Link to this post

    Hi Jocelyn,

    The following css works as expected at my end.

    CSS:
    .menuImageHover
    {
     background-position: -150px!important;
    }
    .menuImagePressed
    {
     background-position: -300px!important;
    }

    Hope this helps.

    Thanks,
    Princy.
  3. RSI
    RSI avatar
    84 posts
    Member since:
    Nov 2011

    Posted 04 Dec 2016 Link to this post

    I have multiple CSS depending on the different themes our clients pick.  i have icons in separate folders that will be used in the CSS for each given theme. There are a list of program types that are used in a grid - ie: Swim, Tennis, Football, etc. and they each have their own hover and standard state icons. I need to change the icons depending on which theme they have chosen, so i easily switch the CSS in the ItemCreated event. The issue is the icon does not change for "CssClass" only for "PrimaryIconCssClass". This fine, but how do i change the hover icon url? There is not a "Icon.HoverIconCssClass".

     

    This decorates it fine by setting "btnSwimNor" to the CSSClass. 

    myRadButton..CssClass = "btnSwimNor"

    .btnSwimNor .rbDecorated{
        font-family: "Calibri" !important;
        font-weight: 700 !important;
        font-size: 13pt !important;
        text-align: right !important;
        padding-right: 10px !important;
        color: #ffffff !important;     
    }

     

    This sets the icon fine when setting the PrimaryIconCssClass

    myRadButton..Icon.PrimaryIconCssClass = "btnSwimNor"

    .btnSwimNor.rbPrimaryIcon {
        background: url('../../_helpers/swim-wht-32.png') no-repeat;
    }

     

    Note: i tried to put the "background" above in the first code block for the decorated but it didnt put the icon in. I had to set it using the PrimaryIconCssClass.

     

    I need to set this to the hover url by using Css

    {

    background: url('../../Web20/swim-32.png') no-repeat;

    }

     

    Remember this is done in the item created event and changes the css to the button. I cant seem to get the hovered icon to be changed. The hovered IconCssClass is below, but the background does nothing.

    myRadButton.HoveredCssClass = "btnSwimHov"

     

    .btnSwimHov .rbDecorated {
        font-family: "Calibri" !important;
        font-weight: 700 !important;
        font-size: 14pt !important;
        text-align: right !important;
        padding-right: 10px !important; 
        color: midnightblue !important;          /*Me.m_ColorForeDark = ColorTranslator.FromHtml("#367eb1")*/
        background: url('../../Web20/swim-24.png') no-repeat;
    }

     

     

    Can you give me some insight to swapping out the hover icon url on the fly?

     

    Thanks!

  4. RSI
    RSI avatar
    84 posts
    Member since:
    Nov 2011

    Posted 06 Dec 2016 in reply to RSI Link to this post

    Anybody out there......
  5. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 07 Dec 2016 Link to this post

    Hi,

    I was not able to understand what you want to achieve by using that code exactly.

    You also didn't mentioned what is the used render mode.

    I suppose it should be classic, but with the given configuration, I don't see where an element with class .rbDecorated is rendered.

    I used your asp configuration and placed background images to the button for normal and hovered state using the following:

    <head runat="server">
        <title></title>
        <style>
            span.RadButton.rbLinkButton.menuImage {
                background-image: url('normal-state.png');
                height: 60px;
                width: 187px;
                position: relative;
                background-color: transparent;
                border: 0 none;
            }
     
            span.RadButton.rbLinkButton.menuImage:hover {
                background-image: url('hovered-state.png');
                border: 0 none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
     
            <telerik:RadButton runat="server" ID="menuBtn" AutoPostBack="false" OnClientClicked="BtnClick"
                HoveredCssClass="menuImageHover" CssClass="menuImage" PressedCssClass="menuImagePressed" RenderMode="Classic">
                <ContentTemplate>
                    <div id="mButton" class="mainMenuButton" runat="server">
                        <table border="0">
                            <tr>
                                <td>
                                    <img id="icon" alt="" runat="server" />
                                </td>
                                <td style="width: 100%; text-align: center">
                                    <span id="text" runat="server"></span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </ContentTemplate>
            </telerik:RadButton>
     
        </form>
    </body>
    </html>

    Attached are two background images that I am using for both states.

    I would also suggest to upgrade to the latest controls version and use LightWeight render mode.

    If you need further assistance, open a support ticket and send us a runnable code and screenshots representing what is your goal.

    Regards,
    Bozhidar
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  6. RSI
    RSI avatar
    84 posts
    Member since:
    Nov 2011

    Posted 07 Dec 2016 in reply to Bozhidar Link to this post

    The buttons are in a grid so its a repeater. there are multiple buttons that could a have a swim image, tennis image, football, etc., all depending on a type that is in the record with the repeater. Different clients have different themes, so i have css sheets depending on their themes. in each sheet should be pointing to a different image location per hover/normal state of the button. the radbuttons have different colors depending on the theme used so i need different images for the button. I cant put the css name in the aspx because it might be needing a different icon, so it has to be on the item created of the event.

    Ex: swim type

    HoveredCssClass="btnSwimHover" CssClass="btnSwim" PressedCssClass="btnSwimPressed"

    Ex: tennis type

    HoveredCssClass="btnTennisHover" CssClass="btnTennis" PressedCssClass="btnSwPressed"

     

    I have the item creating doing fine for normal state. i cant seem to get it to change css for hover state.

     

     

    <telerik:RadButton runat="server" ID="RadButtonViewGroups" Image-IsBackgroundImage="true" Height="65px" Width="125px" Text="View Programs"    
        OnClientClicking="RadButtonShowGroups" AutoPostBack="false" CommandArgument='<%# Eval("ProgramId") %>'  >
        <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32"  />
    </telerik:RadButton>

     

    e

  7. RSI
    RSI avatar
    84 posts
    Member since:
    Nov 2011

    Posted 07 Dec 2016 in reply to RSI Link to this post

    Okay i got it. You have a bug - this is why the icon would not show.

    This is the css i set on the server side item created

    .btnSwim .rbDecorated {
        font-family: "Calibri" !important;
        font-weight: 700 !important;
        font-size: 13pt !important;
        text-align: right !important;
        padding-right: 10px !important;
        padding-left: 25px !important;
        color: #ffffff !important;
    }
    .btnSwim .rbPrimaryIcon {   
        background-image: url('../../_helpers/swim-wht-32.png') !important;
    }
     
    .btnSwim:hover .rbDecorated {   
        color: #191970 !important;
    }
    .btnSwim:hover .rbPrimaryIcon {
        background-image: url('../../Web20/swim-32.png') !important;
    }

     

    Here is the server side code

    ...
    Case cMyManager.RSI_CategoryValues_tbl.eProgramType.soccer
                                RadButtonViewGroups.CssClass = "btnSoccer"
     
                            Case cMyManager.RSI_CategoryValues_tbl.eProgramType.swimming
                                RadButtonViewGroups.CssClass = "btnSwim"
     
                            Case cMyManager.RSI_CategoryValues_tbl.eProgramType.tennis
                                RadButtonViewGroups.CssClass = "btnTennis"
    ...

     

    Now the aspx. NOTE: if i remove the property of the PrimaryIconUrl="../images/Layout/themes/_helpers/key-wht-32.png" it will never use the css icons. Once i put this in there, it used my css urls correctly. I think this is a bug.

    <telerik:RadButton runat="server" ID="RadButtonViewGroups" Height="65px" Width="125px" Text="View Programs"                                                  
        OnClientClicking="RadButtonShowGroups" AutoPostBack="false" CommandArgument='<%# Eval("ProgramId") %>'  >
        <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32" PrimaryIconUrl="../images/Layout/themes/_helpers/key-wht-32.png"  />
    </telerik:RadButton>

     

     

     

     

  8. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 08 Dec 2016 Link to this post

    Hi,

    Can you confirm that you are using version 2012.2 607 or the latest version and what rendering mode - Classic or Lightweight?

    If you are using a version from 2012 it is possible that in a version four years later that the bug is fixed or the common behavior is improved.

    Regards,
    Bozhidar
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  9. RSI
    RSI avatar
    84 posts
    Member since:
    Nov 2011

    Posted 08 Dec 2016 in reply to Bozhidar Link to this post

    The render mode is whatever the default is if its not set, which i believe is classic. The version is 2015.1.225.40. We have the newest version which has not been tested or installed yet.

     

  10. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 09 Dec 2016 Link to this post

    Hello,

    I have tested with the latest version, and using the following, everything works as expected:

    <head runat="server">
        <title></title>
        <style>
            .btnSwim .rbDecorated {
                font-family: "Calibri" !important;
                font-weight: 700 !important;
                font-size: 13pt !important;
                text-align: right !important;
                padding-right: 10px !important;
                padding-left: 25px !important;
                color: #ffffff !important;
            }
     
            .btnSwim:hover .rbDecorated {
                color: #191970 !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
     
     
            <telerik:RadButton runat="server" ID="RadButtonViewGroups" Height="65px" Width="125px" Text="View Programs"
                AutoPostBack="false" RenderMode="Classic" CssClass="btnSwim">
                <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32" PrimaryIconUrl="search_32x32.png" PrimaryHoveredIconUrl="search_hovered_32x32.png" />
            </telerik:RadButton>
     
     
        </form>
    </body>
    </html>


    Note, that I set the urls to the icons in the Button configuration.

    For that case, attached is a small project - Button-Hovered-1.

    This is a short video showing that both icons set - for normal and hovered states work properly: http://screencast.com/t/jmeP3TeHXv6

    The second option, if you want to use CSS is to use the PrimaryIconCssClass property.

    <head runat="server">
        <title></title>
        <style>
            .btnSwim .rbDecorated {
                font-family: "Calibri" !important;
                font-weight: 700 !important;
                font-size: 13pt !important;
                text-align: right !important;
                padding-right: 10px !important;
                padding-left: 35px !important;
                color: #ffffff !important;
            }
     
            .btnSwim:hover .rbDecorated {
                color: #191970 !important;
            }
     
            .MyIcon {
                background-image: url('search_32x32.png');
            }
     
            .btnSwim.rbHovered .MyIcon {
                background-image: url('search_hovered_32x32.png');
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager="server"></asp:ScriptManager>
            <telerik:RadButton runat="server" ID="RadButtonViewGroups" Height="65px" Width="155px" Text="View Programs"
                AutoPostBack="false" RenderMode="Classic" CssClass="btnSwim">
                <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32" PrimaryIconCssClass="MyIcon" />
            </telerik:RadButton>
        </form>
    </body>
    </html>

    Attached is sample project and a short video showing the result in the browser: http://screencast.com/t/dlL1IE21

    In the above two examples it is shown that custom icons work properly in Classic mode using PrimaryIconCssClass or PrimaryIconUrl properties.

    Regards,
    Bozhidar
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top