HoveredCssClass no working

4 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. RSI
    RSI avatar
    80 posts
    Member since:
    Nov 2011

    Posted 2 days and 16 hours ago 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!

  5. RSI
    RSI avatar
    80 posts
    Member since:
    Nov 2011

    Posted 23 hours ago in reply to RSI Link to this post

    Anybody out there......
Back to Top